<template>
  <div class="games-page">
    <ul class="top-games" v-if="false">
      <template v-for="(item,idx) in topList" >
        <li v-if="!item.topType" :class="{'no-data':!item.id}">
          <template v-if="item.id">
            <a :href="'/game/'+item.id" target="_blank">
              <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
              <div class="con-mask"></div>
              <div class="basic-data">
                <div class="tit" :title="item.title">{{item.title}}</div>
                <div class="desc">{{topTextDescs[idx]}}</div>
              </div>
              <div class="left-icos">
              <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                  <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                  <img loading="lazy" slot="reference" src="../assets/pro/common/new.png" alt="">
              </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                  <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                  <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="">
                </el-popover>
                <el-popover popper-class="gm-info-pop"
                        placement="top-start"
                        trigger="hover"  v-if='item.videoUrl'>
                        <i class="sm-tip" slot-content>内容含视频</i>
                        <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt="">
                      </el-popover>
              </div>
              <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
                <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" />
              </div>
            </a>
            <span class="is-adv" v-if="idx==topList.length-1">广告</span>
          </template>
        </li>
        <li v-else>
          <a :href="item.url" target="_blank">
            <img loading="lazy" :src="item.image" alt="" />
          <div class="con-mask"></div>
          <div class="basic-data">
            <div class="otit">{{item.title}}</div>
          </div>
          <span class="is-adv">广告</span>
          </a>
        </li>
      </template>
    </ul>

    <div class="gm-home-stic" v-if="false">
      <!-- <div class="zj-ba-data yx-cate" :class="{'scale':isScale}" id="mainfilter">
        <div class="bal-tit">
          <el-popover popper-class="xkj-sou-pop"
                    placement="bottom"
                    trigger="hover">
                    <div class="xj-search-desc">
                      <div class="sub-desc">推荐标准：</div>
                      <div class="sub-d">
                        1. 网站未入库/重大更新；<br/>
                        2. 非搬运/抄袭；<br/>
                        3. 创意表现突出；<br/>
                        4. 制作品质优良
                      </div>
                    </div>
            <a slot="reference" class="no-bg">游戏类型</a>
          </el-popover>
        </div>

        <pswiper wrapclass="yx-cates" id="cateSwp" ref="refCateSwp" :betn="20" :slides="6.5" prevclass="gmcate-page-prev-msize" nextclass="gmcate-page-next-msize">
          <li v-for="(item,idx) in gTypes" :key="idx" class="swiper-slide yx-c-item" :class="{'active':queryParams.categoryIds==item.value,'no-data':!item.value}" :style="{backgroundColor:item.bgColor}" v-if="item.value!=''">
              <a :href="'/games?cat='+item.value" @click.prevent="chooseByCate(item)" v-if="item.value">
                <img loading="lazy" src="" alt="">
                <span class="txt">{{item.title}}</span>
              </a>
          </li>
        </pswiper>
      </div> -->
      <!-- <pswiper wrapclass="nav-cates" :betn="20" ref="refSwCate" :slides="12" prevclass="cate-page-prev"
          nextclass="cate-page-next" id="cateSwp">
          <li class="swiper-slide" :class="{ 'active-color': !curTab }"><a :href="'/screenshots'"
                  @click.prevent="chooseFun()">全部</a></li>
          <li class="swiper-slide" :class="{ 'active-color': fun.selected }" v-for="(fun, fx) in funs"><a :href="'/screenshots?f=' + fun.value"
                  @click.prevent="chooseFun(fun)">{{ fun.title }}</a></li>
      </pswiper> -->
      <div class="gp-filter">
        <div class="gp-img-layout">
          <DropDown :list="tList" :value.sync="queryParams.orderByColumn" :tlist="tagFilter"
                :subvalue.sync="queryParams.rank" @change="onDropDwonChange" style="min-width: 150px;" placeholder="" /> 
          <div class="label-filter">
                <span class="tit">平台</span>
                <div class="plat-items">
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>PC</i>
                        <span slot="reference" class="pitem windows" :class="{ 'active': queryParams.device == 'PC' }"
                            @click="chooseDevice('PC')"></span>
                    </el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>主机</i>
                        <span slot="reference" class="pitem xbox" :class="{ 'active': queryParams.device == '主机' }"
                            @click="chooseDevice('主机')"></span></el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>掌机</i>
                        <span slot="reference" class="pitem switch" :class="{ 'active': queryParams.device == '掌机' }"
                            @click="chooseDevice('掌机')"></span></el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>手游</i>
                        <span slot="reference" class="pitem apple" :class="{ 'active': queryParams.device == '手游' }"
                            @click="chooseDevice('手游')"></span></el-popover>
                </div>
          </div>
          <div class="label-filter">
              <span class="tit">版式</span>
              <div class="plat-items">
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                      <i class="sm-tip" slot-content>横屏</i>
                      <span slot="reference" class="pitem h-screen" :class="{ 'active': queryParams.orientation == '横屏' }"
                          @click="chooseScreen('横屏')"></span></el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                      <i class="sm-tip" slot-content>竖屏</i>
                      <span slot="reference" class="pitem s-screen" :class="{ 'active': queryParams.orientation == '竖屏' }"
                          @click="chooseScreen('竖屏')"></span></el-popover>
              </div>
          </div>
          <div class="zw-fn-el">
            <div class="seach-bx" :class="{'active':searchIsFocus,'is-nuvisit':showFnew}">
              <form @submit.prevent="()=>{return false}" class="q-f-item-wrap">
                  <template v-for="c in cateObj">
                      <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span class="ct">{{c.name}}</span><span class="ct-val">{{s.title}}</span><i class="it-clr" @click="onParamterClear(c,s)"></i>
                      </div>
                  </template>
                  <input type="text" @focus="searchIsFocus=true" @blur="searchIsFocus=false" :placeholder="'按标题/风格/类型等搜索 '+inspirationInfo.articleNum+' 款游戏'" v-model="queryParams.title" @keypress.enter="onEnter"/><a class="cancel-search" v-if="queryParams.title" @click="queryParams.title=''"></a>
              </form>
            </div>
            <div class="game-n-u-visit" v-if="showFnew">
              <div class="nv-content">
                <div class="nv-content-l">
                  <span>「点这里，搜索游戏」</span>
                  <span>按标题风格类型，快速查询</span>
                </div>
                <a class="n-u-v-close" @click="handlCloseTop"></a>
              </div>
              <div class="cursor"></div>
            </div>
          </div>
        <div class="bs-layout">
          <div class="plat-items">
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>大图模式</i>
                <span slot="reference" class="f-layout" :class="{'active':model=='big'}" @click="model='big'"></span>
            </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                <i class="sm-tip" slot-content>小图模式</i>
                <span slot="reference" class="mup-layout" :class="{'active':model=='small'}" @click="model='small'"></span>
            </el-popover>
          </div>
        </div>
        <div class="bs-g-flabel">
          <span class="cur" @click="showFilter=!showFilter">筛选</span>
        </div>
        </div>
      </div>
    </div>

    <div class="cap-top" :class="{'focus-search':isFocus}">
			<div class="st-cnt-area" v-if="pageTab==1&&showCnt">精选 <countTo :startVal="0" :endVal="inspirationInfo.articleNum"/> 款游戏，为你节省数小时的研究时间</div>
			<div class="st-cnt-area" v-if="pageTab==2&&showCnt">基于 <countTo :startVal="0" :endVal="inspirationInfo.imageNum"/> 张截图数据积累，AI智能搜索</div>
			<div class="st-cnt-desc">
				{{pageTab==1?inspirationInfo.content:'搜索任意文本通过算法识别标注结果，快速找到对应的系统模块'}}
			</div>
			<div class="nine-ins-search">
				<form class="nine-home-search" :style="isFocus&&showSearchkeys?'z-index:1041':''" id="main_search"  onsubmit="return false;">
					<div class="left">
						<div class="n-h-s-type-nav">
							{{pageTab==1?'游戏':'截图'}}
							<div class="n-h-s-type-nav-sub-box">
								<div class="n-h-s-type-nav-subs">
									<a @click="changeFilterCapType(1)" :class="{'active':pageTab==1}">游戏</a>
									<a @click="changeFilterCapType(2)" :class="{'active':pageTab==2}">截图</a>
								</div>
							</div>
						</div>
						<input autocomplete="off" id="inspKeyBox" type="text" @keyup="handleBylikeSearch"  @keypress.enter="onEnter" v-model="queryParams.title" @focus="onInspKeyBoxFocus" :placeholder="pageTab==1?'搜索游戏（试试 原神）':'搜索截图（试试 胜利）'">
						<i class="common-icon-clear-inp" v-if="queryParams.title" @click="queryParams.title='';globalSearchkeys=[];showSearchkeys=false;" style="margin-right:8px;"></i>
						<div class="color-filter gpic-clr" :class="{'no-after':queryParams.imageColor}">
							<input type="text" id="colorfilter" class="colorfilter" style="display: none;">
							<span class="cur-color-val" :class="{'cur-color-default-val':!queryParams.imageColor}" :style="queryParams.imageColor?'background-color:'+queryParams.imageColor+';':''"></span>
							
							<!-- <i class="common-icon-clear-inp" v-if="color" @click="handleClearColor"></i> -->
						</div>
						<span class="n-h-s-icon-bar" @click="isFocus=false;showSearchkeys=true;curSearchKey=queryParams.title;handleSearch()">
						</span>
					</div>
					<div class="search-by-pic-box">
          				<a class="search-by-pic" @click="isFocus=false;showSearchkeys=false;showPicToPic=true">以图搜图</a>
          			</div>
					<!--a class="search-by-pic" @click="handleSearchByPic">以图搜图</a-->
					<div class="nie-global-search-result-box home-his-fix" v-show="isFocus&&(searchData.length>0||browserData.length>0)&&globalSearchkeys.length==0">
            <TopMaskContent/>
						<!-- <div class="nbsrb-tit" v-if="searchData.length>0">最近搜索</div>
						<div class="his-result-items" v-if="searchData.length>0">
						<span v-for="(str,idx) in searchData" :title="str" :key="'str_'+idx" @click="handleSearchByCommkey(str)"><em>{{ str }}</em> <i class="iconfont el-icon-close" @click.stop="removeHis(idx,str)"></i></span>
						</div>
						<div class="nbsrb-tit" v-if="browserData.length>0">最近浏览过的</div>
						<div class="his-result-items bs-result-items" v-if="browserData.length>0">
              <a target="_blank"  v-for="(item,idx) in browserData" :href="item.pageurl">
                <span :title="item.title" :key="'bstr_'+idx">
                  <img loading="lazy" :src="`https://img.gameui.net/url-${base64(item.picurl)}@1x39.webp`" :srcset="`https://img.gameui.net/url-${base64(item.picurl)}@2x39.webp 2x, https://img.gameui.net/url-${base64(item.picurl)}@3x39.webp 3x`" alt="" />
                  <em>{{item.title}}</em>
                </span>
              </a>
						</div> -->
					</div>

					<div class="global-keyword-searchs global-keyword-searchs-top" v-if="globalSearchkeys.length>0&&showSearchkeys">
						<div class="searchs-item" v-for="(item,idx) in globalSearchkeys"  :class="{'active':keySelectIndex==idx}" :key="'gstr_'+idx" v-html="item.content" @click.stop="changeSearchKey(item)">
						</div>
					</div>
				</form>
				<div class="hot-search-keys" v-if="hotWords.length>0">
					<span class="label">热门搜索：</span>
					<div class="hot-keys">
						<span v-for="(k,idx) in hotWords" :key="idx">
							<a @click="keywordIndex=idx;showSearch=false;handleSelSysKey(k.title)">{{k.title}}</a>
							{{idx!=hotWords.length-1?' ，':''}}
						</span>
					</div>
				</div>
			</div>
		</div>
    <div class="list-wrap-flex">
    <div class="search-area mobile" :class="{'is-mobile-fix':showLfilter}">
      <div class="seach-bx" :class="{'active':searchIsFocus,'is-nuvisit':showFnew}">
        <form @submit.prevent="()=>{return false}">
            <input type="text" @focus="searchIsFocus=true" @blur="searchIsFocus=false" placeholder="搜索标签…" v-model="tagKeyword" /><a class="cancel-search" v-if="tagKeyword" @click="tagKeyword=''"></a>
        </form>
      </div>
      <FilterBy  class="sch-sticky" :cates="cateObj" :params="queryParams" ref="refFilterBy" @change="onFilterChange" :keyword="tagKeyword" :viewnumfield="pageTab==1?'articleNum':'imageNum'"
      v-show="showFilter && cateObj.length > 0" />
    </div>
    <div class="list-data-box">
      <div class="fixed-wrap">
        <div class="top-filter-area">
          <div class="flc">
            <a @click="handleShowFilter" class="col-side-bar"></a><template v-if="queryParams.title">
              <div class="nums">  {{ '"'+queryParams.title+'“' }} 的搜索结果&nbsp;&nbsp;</div>
            </template>
            <div class="selected-filters" v-if="showclearall&&!queryParams.title">
              <template v-for="c in cateObj">
                <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span class="ct-val">{{ s.title }}</span><i class="it-clr" @click="onParamterClear(c, s)"></i></div>
              </template>
              <a class="clr-all" @click="handleClearAll">清除全部</a>
            </div>
            <a class="clr-all" @click="handleClearAll" v-else-if="showclearall||queryParams.title">清除全部</a>
            <!-- <a @click="handleShowFilter" class="col-side-bar"></a>
            <div class="nums" v-if="pageTab==-1">
            </div>
            <template v-else>
              <div class="nums" v-if="pageTab==1">
                <template v-if="queryParams.title">
                  {{ '"'+queryParams.title+'“' }} 的搜索结果&nbsp;&nbsp;
                </template>
                <a class="clr-all" @click="handleClearAll" v-show="showclearall||queryParams.title">清除全部</a>
              </div>
              <div class="nums" v-if="pageTab==2">
                <template v-if="queryParams.title">
                  {{ '"'+queryParams.title+'“' }} 的搜索结果&nbsp;&nbsp;
                </template>
                <a class="clr-all" @click="handleClearAll" v-show="showclearall||queryParams.title">清除全部</a>
              </div>
            </template> -->
          </div>
          <div class="filter">
            <div style="margin-left:0px;" class="bs-g-flabel gpic-clr" :class="{'is-fenw':showImgColorFnew&&queryParams.imageColor}">
                    <div class="cur">
                        <input type="text" id="colorfilter"  class="colorfilter" style="display: none;">
                        <span v-if="queryParams.imageColor" :style="{ backgroundColor: queryParams.imageColor }"
                            class="query-color"></span>颜色 <i v-if="queryParams.imageColor"
                            @click="handleClearClr" class="clear-by-search"></i>
                    </div>
                    <div class="games-filter" v-if="queryParams.imageColor">
                        <div class="games-filter-wrap color-wrap">
                            <div class="rtzd">
                                准确度：
                                <div class="rtzd-box">
                                    <el-slider :min="0" tooltip-class="no-tip" v-model="queryParams.colorrto" @change="onColorRtoChange"
                                    :max="80"></el-slider><span class="rto-val">{{ queryParams.colorrto}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="game-n-u-visit img-color-fenw" v-if="showImgColorFnew&&queryParams.imageColor">
                        <div class="nv-content">
                            <div class="nv-content-l">
                                <span>「悬浮这里，显示调节滑块」</span>
                                <span>数值越低越贴近主色调</span>
                            </div>
                            <a class="n-u-v-close" @click="handlCloseImgColorTop"></a>
                        </div>
                    </div>
                </div>
            <DropDown :list="tList" :value.sync="queryParams.orderByColumn" :tlist="tagFilter"
                :subvalue.sync="queryParams.rank" @change="onDropDwonChange" style="min-width: 150px;" placeholder="" />
            <div class="switch-type-box">
              <a :class="{'active':pageTab==1}" @click="chooseTab(1)">游戏</a>
              <a :class="{'active':pageTab==2}" @click="chooseTab(2)">截图</a>
            </div>
          </div>
        </div>
        <div class="selected-filters" v-if="showclearall&&(queryParams.title&&queryParams.title.length>0)">
          <template v-for="c in cateObj">
            <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span class="ct-val">{{ s.title }}</span><i class="it-clr" @click="onParamterClear(c, s)"></i></div>
          </template>
          <!-- <a class="clr-all" @click="handleClearAll">清除全部</a> -->
        </div>
      </div>
      <div class="vwrap">
        <ul class="games-data" :class="[model]" v-if="pageTab==1">
          <li v-for="(item, idx) in list" :key="idx" class="gd-item" :class="{'no-data':!item.id}">
            <a :href="'/game/'+item.id" target="_blank" v-if="item.id">
              <div class="mimg-box" :class="{'has-after':item.show}">
                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError" @load="(e)=>{onCoverLoaded(e,item)}"/>
                <template v-if="item.show">
                  <span class="pnum">{{ item.totalImageCount }}</span>
                
                  <div class="cate-dsc">{{item.device}}{{item.categoryName?(item.device?' · ':'')+item.categoryName:''}}{{item.style?' · '+item.style:''}}{{item.era?' · '+item.era:''}}</div>
                </template>
              </div>
              <template v-if="item.show">
                <div class="basic-info">
                  <div class="title">{{ item.title }}</div>
                  <div class="bot-desc">
                    <span class="uname" v-if="item.member">
                      <img loading="lazy" class="u-img" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }"/>
                      <a class="name-text">{{ item.member.userName }}</a>
                      
                      <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                    <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                    <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                    </el-popover>
                    </span>
                    <div class="znum">
                      {{ item.praiseStr }}
                    </div>
                    <div class="vnum">
                      {{ item.seeStr }}
                    </div>
                  </div>
                </div>
                <div class="left-icos">
                  <!-- <img loading="lazy" src="../assets/pro/common/hot.png" alt="" v-if="item.hot" /> -->
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                      <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                      <img loading="lazy" slot="reference" src="../assets/pro/common/new.png" alt="">
                  </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                    <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                    <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="" v-if="item.hot">
                  </el-popover>
                  <el-popover popper-class="gm-info-pop"
                            placement="top-start"
                            trigger="hover">
                            <i class="sm-tip" slot-content>内容含视频</i>
                            <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt="" v-if='item.videoUrl'>
                          </el-popover>
                </div>
                <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
                  <!-- <img loading="lazy" src="../assets/pro/common/rz2.png" alt=""> -->
                  <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" />
                </div>
              </template>
              <!-- <div class="con-mask hid-el"></div> -->
            </a>
          </li>
        </ul>
        <ImgList id="1" ref="refWaf" :list="list" :columns="columns"  :defaultw="431" v-else-if="pageTab==2&&list.length>0"/>
        <div class="web-data-error" v-if="isDataError">
          <div class="tip-text">别走开刷新一下，有所爱才有所期待～</div>
          <div class="options">
            <a class="go-back" href="/">返回首页</a>
            <a class="click-refresh" @click="handleRefresh">点击刷新</a>
          </div>
        </div>
        <div class="b-empty-box" v-if="!isloading&&list.length==0" >
          <Empty text="没有找到符合条件的结果~" v-if="!isloading&&list.length==0"/>
          <a class="bsearch" :href="'/searchs?t=&k='+(queryParams.title?queryParams.title:'')" target="_blank">扩大范围继续搜索</a>
        </div>

        <div class="no-more-text" v-if="!hasMore&&!isloading&&list.length>0">没有更多了</div>
        <div class="pro-bot-loading" v-if="isloading">
            <i class="el-icon-loading"></i>
        </div>
      </div>

    </div>
    </div>
    <!-- <Empty text="没有找到符合条件的结果~" style="padding-bottom:100px;" v-if="!isloading&&list.length==0"/> -->
    
		<!-- 搜索遮罩 -->
		<div class="home-search-mask" @click="isFocus=false;showSearchkeys=false;" v-if="isFocus">

    </div>
    <UnLoginMask/>
    <!-- <transition name="fade"> -->
      <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
      <gameInfo @close="onInfoClose" :id="currentId"/>
    </el-drawer>
    <!-- </transition> -->
    <div class="loading-mask" v-if="isloading"></div>

    <div class="show-l-filter-mask" v-if="showLfilter" @click="handleCloseFilter"></div>

    <a-modal v-model="showPicToPic" destroyOnClose centered :footer="null"  :closable="false" width="670px">
      <PicToPicSearch @cancel="showPicToPic=false" @onsearch="onPicSearch"/>
    </a-modal>
  </div>
</template>

<script>
import PicToPicSearch from '@/components/PicToPicSearch'
let time;
import qs from 'qs'
import CountTo from 'vue-count-to';
import ImgList from '@/components/WaterfallFlowImgList'
import FilterBy from '@/components/FilterBy'
import UnLoginMask from '@/components/UnLoginMask'
import Empty from '@/components/Empty'
import DropDown from '@/components/dropdown'
import pswiper from '@/components/pswiper'
import moment from 'moment'
import gameInfo from '@/components/gameInfo'
import api from '@/api/api'

  import TopMaskContent from '@/components/TopMaskContent'
export default {
  components:{gameInfo,pswiper,DropDown,Empty,UnLoginMask,FilterBy,ImgList,CountTo,PicToPicSearch,TopMaskContent},
  data() {
    return {
      isDataError:false,
      tagKeyword:'',
      showPicToPic:false,
      hotKeys:'',
      isScrollShow:false,
      isScroll:false,
      hotWords:[],
      browserData:[],
      globalSearchkeys:[],
      color:'',
      searchData:[],
      showCnt:false,
      showLfilter:false,
      columns:5,
      pageTab:-1,
      showclearall:false,
      showImgColorFnew:false,
      curTab:'',
      funs:[],
      showFilter:true,
      cateObj: [],
      isScale:false,
      showFnew:false,
      searchIsFocus:false,
      isloading:true,
      topTextDescs:['今日最佳国风游戏','今日最佳欧美游戏','今日最佳二次元游戏','今日最佳日韩游戏','今日最佳Q版卡通游戏','今日最佳科幻游戏','今日最佳军事游戏'],
      inspirationInfo:{
          imageNum:0,
          content:'',
          articleNum:0
      },
      cateIdx:-1,
      isAutoTakeTo:false,
      tagFilter:[],
      tList:[],
      topList:[{},{},{},{},{},{},{},{},{}],
      isFocus:false,
      model:'big',
      currentId:'',
      showInfo: false,
      keyword: '',
      gTypes: [{},{},{},{},{},{},{},{}],
      list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      queryParams: {
        colorrto:10,
        title:'',
        pageNum: 1,
        pageSize: 30,
        orderByColumn:'createTime',
        rank:'',
        categoryId:22,
        isAsc:'desc',
        categoryIds:'',
        device:''
      },
      total: 0,
      hasMore: true,
      scrollLoaded: false,
      allCates: [],
      curAllCateKey: '',
      curCates: [],
      curFullPath:''
    }
  },
  watch: {
    $route(f, b) {
      let _style=this.$route.query.style;
      if(_style){
        let that=this;
        let _allStyles=this.allCates.styles.map(r=>{return r.value;});
        if(_allStyles.includes(_style)){
          this.cateObj[0].items.map(item=>{
            if(item.value==_style){
              item.selected=true;
              that.cateObj[0].checked=true;
              that.cateObj[0].showAll=true;
              that.showclearall=true;
            }else{
              item.selected=false;
            }
          })
          this.queryParams.style=_style;
        }
        this.handleSearch();
      }
    },
    keyword(newd,old){
      this.allCates.map(parent=>{
        parent.result.map(item=>{
          if(item.title.indexOf(newd)>-1){
            item.show=true;
          }else{
            item.show=false;item.showOther=false;
          }
        })
      })
    },
    pageTab(newval){
      // if(this.pageTab==1){
      //   // this.queryParams.rank='首页推荐';
      //   this.$router.replace({path:'/games?t='+newval+(this.$route.query.style?'&style='+this.$route.query.style:'')})
      // }else{
      //   // this.queryParams.rank='';
      // }
      //this.$router.replace({path:'/'+(newval==1?'games':'screenshots')+'?t='+newval+(this.$route.query.style?'&style='+this.$route.query.style:'')})

      this.isDataError=false;

      if(newval==1){
        this.queryParams.rank='首页推荐'
      }else{
        this.queryParams.rank=''
      }

      if(newval==1){
        this.$parent.$refs.gHeader.placeHolderText='搜索游戏（试试 原神）';
        this.$parent.$refs.gHeader.globalSearchKeyType='linggan';
      }else if(newval==2){
        this.$parent.$refs.gHeader.placeHolderText='搜索截图（试试 胜利）';
        this.$parent.$refs.gHeader.globalSearchKeyType='articleImage';
      }
      let urlParams=this.getUrlParams();
      window.history.pushState({}, 0, '/'+(newval==1?'games':'screenshots')+'?'+qs.stringify(urlParams));
      this.handleSearch();
    }
  },
  destroyed() {
    window.removeEventListener('scroll',this.docScroll);
  },
  async mounted() {
    $('body,html').animate({
        'scrollTop':0
      },200);
    $('#app .pro-header .search-bx form').css('display','none');
    $('#app').removeClass('is-scroll').addClass('is-game').addClass('is-gm-home');
    let that = this;
    if(!localStorage.getItem('GAMES-NYD')){
      this.showFnew=true;
    }
    if(!localStorage.getItem('IMG-COLOR-NYD')){
        this.showImgColorFnew=true;
    }
    // let prm = {
    //     pageNum: 1,
    //     pageSize: 8,
    //     orderByColumn: 'see',
    //     isAsc: 'desc'
    //   }
    // let res=await api.articlelist(prm);

    let _tops=[];

    let start=new Date();
    let starttime=moment(new Date(start).setDate(start.getDate()-1)).format('YYYY-MM-DD');
    let end=new Date(start.setDate(start.getDate()));
    let endtime=moment(end).format('YYYY-MM-DD');

    // let res=await api.hotWords({type:0,showAll:true,pageNum:1,pageSize:30});
        
    // this.funs = res.data;
    
    // let nparams={style:'国风',sort:'day_rank'}
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='欧美';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='二次元';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='日韩';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='Q版卡通';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='科幻';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='军事';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];

    // res=await api.getHomeNavs();
    // res.data.map(item=>{
    //   item.topType=3;
    // })
    // _tops=[..._tops,...res.data.splice(0,2)];

    
    // let domainUrl=this.$imgdomainurl;
    // _tops.map(item=>{
    //   let _vtime=null;
    //   if(item.updateTime){
    //     _vtime=item.updateTime;
    //   }else if(item.createTime){
    //     _vtime=item.createTime;
    //   }else if(item.create_time){
    //     _vtime=item.create_time.replace('T',' ');
    //   }
    //   _vtime=Math.abs(new Date(_vtime).getTime());
    //   let srcsets=[];
    //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x432.webp 1x');
    //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x432.webp 2x');
    //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x432.webp 3x');
    //   item.srcsets=srcsets.join(',')
    //   item.lazy={
    //     src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
    //     error: require('@/assets/loading_error.png'),
    //     loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
    //   }
    // })
    // this.topList=_tops;

    let res=await api.getCategoryFilter({type:'linggan',subType:'images'});
    res.data.tags.map(item=>{
      if(item.title=='全部推荐'){
        item.title='全部游戏';
      }
    })
    this.tagFilter=res.data.tags.filter(r=>{
      return r.title!='编辑精选'&&r.title!='普通推荐'
    });
    this.tList=res.data.news;

    
    // res=await api.articlelist({orderByColumn:'see',isAsc:'desc',startTime:starttime,endTime:endtime,pageNum:1,pageSize:8});
    
    this.curFullPath=this.$route.fullPath;

    // let _gTypes = localStorage.getItem('G-TYPES');
    // _gTypes = JSON.parse(decodeURIComponent(_gTypes));
    // this.gTypes = _gTypes;

    // let _allCates = JSON.parse(decodeURIComponent(localStorage.getItem('CATE-ALL-TYPES')));
    
    res = await api.getCategoryForInspiration();
    let newObj = {};
    newObj.categorys = res.data.filter(r => {
      return r.key == 'categoryThirdId';
    })[0].result;
    newObj.themes = res.data.filter(r => {
      return r.key == 'theme';
    })[0].result;
    newObj.funs = res.data.filter(r => {
      return r.key == 'gameFunc';
    })[0].result;
    newObj.materials = res.data.filter(r => {
      return r.key == 'game_material';
    })[0].result;
    newObj.devices = res.data.filter(r => {
      return r.key == 'categorySecondId';
    })[0].result;
    newObj.orientations = res.data.filter(r => {
      return r.key == 'orientation';
    })[0].result;
    newObj.eras = res.data.filter(r => {
      return r.key == 'era';
    })[0].result;
    newObj.styles = res.data.filter(r => {
      return r.key == 'style';
    })[0].result;

    localStorage.setItem('OBJ-CATE-ALL-TYPES', encodeURIComponent(JSON.stringify(newObj)));

    // let _allCateTypes=JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
    this.allCates=newObj;
    // <span :class="{ active: curAllCateKey == 'theme' }" @click="chooseCateByKey('theme')">游戏主题</span>
    //           <span :class="{ active: curAllCateKey == 'style' }" @click="chooseCateByKey('style')">游戏风格</span>
    //           <span :class="{ active: curAllCateKey == 'categoryThirdId' }" @click="chooseCateByKey('categoryThirdId')">游戏类型</span>
    //           <span :class="{ active: curAllCateKey == 'era' }" @click="chooseCateByKey('era')">上线年份</span>

    // let _cdatas={
    //   theme:{items:_allCateTypes.themes,field:'tags'},
    //   style:{items:_allCateTypes.styles,field:'style'},
    //   categoryThirdId:{items:_allCateTypes.categorys,field:'categoryThirdId'},
    //   era:{items:_allCateTypes.eras,field:'era'}
    //   };
    let _cdatas=[];
    _cdatas.push({ name: '风格', items: newObj.styles.filter(r=>{return r.title!='全部'}), queryfield: 'style' })
    _cdatas.push({ name: '类型', items: newObj.categorys.filter(r=>{return r.title!='全部'}), queryfield: 'categoryIds' })
    _cdatas.push({ name: '主题', items: newObj.themes.filter(r=>{return r.title!='全部'}), queryfield: 'tags' })

    _cdatas.push({ name: '功能', items: newObj.funs.filter(r=>{return r.title!='全部'}), queryfield: 'paramImagesDescFunc' })
    _cdatas.push({ name: '材质图案', items: newObj.materials.filter(r=>{return r.title!='全部'}), queryfield: 'paramImagesDescMaterial' })

    _cdatas.push({ name: '平台', items: newObj.devices.filter(r=>{return r.title!='全部'}), queryfield: 'device' })
    _cdatas.push({ name: '版式', items: newObj.orientations.filter(r=>{return r.title!='全部'}), queryfield: 'orientation' })
    _cdatas.push({ name: '上线年份', items: newObj.eras.filter(r=>{return r.title!='全部'}), queryfield: 'era' })
    _cdatas.map(item => {
      item.showAll=false;
      item.items.map(r => {
        r.selected = false;
      })
    })

    this.curAllCateKey = _cdatas[0].key;

    let _tag=this.$route.query.tags;
    let _style=this.$route.query.style;
    let _cat=this.$route.query.cat;
    let _dev=this.$route.query.dev;
    let _fun=this.$route.query.paramImagesDescFunc;
    let _k=this.$route.query.k;
    let _era=this.$route.query.era;

    let _allTags=newObj.themes.map(r=>{return r.value;});
    if(_allTags.includes(_tag)){
      this.isAutoTakeTo=true;
      _cdatas[2].items.map(item=>{
        if(item.value==_tag){
          item.selected=true;
          _cdatas[2].checked=true;
          _cdatas[2].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.tags=_tag;
    }
    let _allStyles=newObj.styles.map(r=>{return r.value;});
    if(_allStyles.includes(_style)){
      this.isAutoTakeTo=true;
      _cdatas[0].items.map(item=>{
        if(item.value==_style){
          item.selected=true;
          _cdatas[0].checked=true;
          _cdatas[0].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.style=_style;
    }
    let _allCateIds=newObj.categorys.map(r=>{return r.value;});
    if(_allCateIds.includes(_cat)){
      this.isAutoTakeTo=true;
      _cdatas[1].items.map(item=>{
        if(item.value==_cat){
          item.selected=true;
          _cdatas[1].checked=true;
          _cdatas[1].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
        this.queryParams.categoryIds=_cat;
    }

    let _allFuns=newObj.funs.map(r=>{return r.value;});
    if(_allFuns.includes(_fun)){
      this.isAutoTakeTo=true;
      _cdatas[3].items.map(item=>{
        if(item.value==_fun){
          item.selected=true;
          _cdatas[3].checked=true;
          _cdatas[3].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.paramImagesDescFunc=_fun;
    }

    let _allDevs=newObj.devices.map(r=>{return r.value;});
    if(_allDevs.includes(_dev)){
      this.isAutoTakeTo=true;
      _cdatas[5].items.map(item=>{
        if(item.value==_dev){
          item.selected=true;
          _cdatas[5].checked=true;
          _cdatas[5].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.device=_dev;
    }

    let _allEras=newObj.eras.map(r=>{return r.value;});
    if(_allEras.includes(_era)){
      this.isAutoTakeTo=true;
      _cdatas[7].items.map(item=>{
        if(item.value==_era){
          item.selected=true;
          _cdatas[7].checked=true;
          _cdatas[7].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.era=_era;
    }

    if(_k){
      this.queryParams.title=_k;
      this.isAutoTakeTo=true;
    }

    this.cateObj = _cdatas;
    this.curCates = _cdatas[0].items;
    // this.allCates = _cdatas;

    res=await api.getInspirationStatis();
    that.showCnt=false;
    if(res.code==0){
      this.inspirationInfo=res.data;
      that.showCnt=true;
    }

    this.$nextTick(()=>{
      if(that.$refs['refCateSwp'])
        that.$refs['refCateSwp'].init();

      if(that.$refs['refSwCate'])
        that.$refs['refSwCate'].init();
    })

    $(document.body).delegate('.has-f-t','mouseover',(e)=>{
      $(e.target).parents('.gp-filter').css({zIndex:115})
    }).delegate('.has-f-t','mouseout',(e)=>{
      $(e.target).parents('.gp-filter').css({zIndex:111})
    })
    
    let tab=this.$route.query.t||this.$route.query.pageTab;
    if(tab){
      this.pageTab=tab;
    }else{
      this.pageTab=1;
      this.queryList();
    }

   this.queryHot();

    window.addEventListener('scroll',this.docScroll)

    var copalette = [["#111111", "#FFFFFF", "#9E9E9E", "#A48057", "#FC85B3", "#FF2727","#FFA34B","#FFD534","#47C595","#51C4C4","#2B76E7","#6D50ED"]];
    let colorParams={
        showPalette: true,
        maxSelectionSize:0,
        showSelectionPalette: false,
        palette: copalette,
        showInput: true,
        preferredFormat: "hex6",
        clickoutFiresChange: false,
        cancelText:'清空',
        chooseText:"确定"
    }
    let rqueryColor=this.$route.query.imageColor;
    if(rqueryColor){
        this.isAutoTakeTo=true;
        that.pageTab=2;
        colorParams.color=rqueryColor;
        that.queryParams.imageColor=rqueryColor;
    }
    if(this.isAutoTakeTo){
      setTimeout(()=>{
        that.scrollToSearch();
      },500)
    }
    $(".colorfilter").spectrum(colorParams).on('change.spectrum', function(e, color) {
        that.queryParams.imageColor=$('.default-view-color span').attr('title');

        that.scrollToSearch();
        if(that.pageTab==2){
          that.handleSearch();
        }else{
          that.pageTab=2;
        }
    }).on('clear.spectrum', function(e, color) {
        that.queryParams.imageColor='';
        that.handleSearch();
        

        that.scrollToSearch();
    })
  },
  methods: {
      changeSearchKey(item) {
        this.curSearchKey=item.title;
				this.queryParams.title=item.title;
				this.showSearchkeys=false;
				this.nearHisAdd();
				this.getHisData();
				
				this.handleSearch();
      },
    handleRefresh(){
      this.isDataError = false;
      this.loadMore();
    },
    onCoverLoaded(e,item){
      item.show=true;
    },
    chooseTab(_tab){
      this.pageTab=_tab;

      this.scrollToSearch();
    },
    onPicSearch(list){
      
    },
    onDropDwonChange(){
      this.scrollToSearch();
      this.handleSearch();
    },
			removeHis(idx,str){
				let hisSearchData=localStorage.getItem('NEARHISRESULT');
				hisSearchData=JSON.parse(hisSearchData);
				let removeTmpIdx=0;
				let removeIdx=-1;
				hisSearchData.forEach(item=>{
					if(item==str){
					removeIdx=removeTmpIdx;
					}
					removeTmpIdx++;
				})
				hisSearchData.splice(removeIdx,1);
				this.searchData.splice(idx,1);
				localStorage.setItem('NEARHISRESULT',JSON.stringify(hisSearchData));
			},
			handleSearchByCommkey(str){
				this.queryParams.title=str;
				this.handleSearch();
				
				let urlParams=this.getUrlParams();

				window.history.pushState({}, 0, '/'+(this.pageTab==1?'games':'screenshots')+'?'+qs.stringify(urlParams));
			},
			handleSelSysKey(_keyWord){
				this.curSearchKey=_keyWord;
				this.queryParams.title=_keyWord;
				
          
        this.scrollToSearch();

        this.handleSearch();
        
				let urlParams=this.getUrlParams();

				window.history.pushState({}, 0, '/'+(this.pageTab==1?'games':'screenshots')+'?'+qs.stringify(urlParams));
			},
    async queryHot(){
      let that=this;
      let result=await api.hotWords({showAll:true,pageNum:1,pageSize:10,type:that.pageTab==1?0:1});
      if(result.code==0){
        that.hotWords=result.data;
      }

      if(localStorage.getItem('userId')){
        result=await api.historyList({currentUserId:localStorage.getItem('userId'),pageNum:1,pageSize:5,orderByColumn:'createTime',isAsc:'desc'});
        if(result.code==0){
          that.historyWords=result.data;
        }
      }
    },
			async changeFilterCapType(idx,isHeader){
				this.pageTab=idx;
				
				// if(!isHeader)
				// {
				// 	let cmpComponents=this.$parent.$children;
				// 	let that=this;
				// 	cmpComponents.map((cel)=>{
				// 		if(cel.changeByInspirationStatic){
				// 			cel.changeByInspirationStatic(that.pageTab);
				// 		}
				// 	})
					
				// 	let urlParams=this.getUrlParams();

				// 	window.history.pushState({}, 0, '/inspiration?'+qs.stringify(urlParams));
				// }

				// this.$forceUpdate();
				// this.showSearch=false;
				// this.isFocus=false;
				// this.isLoadedImg=true;
				
				// if(this.pageTab!=2){
				// 	this.articleList=[];
				// 	this.queryList();
				// }else{
				// 	this.imgDataList=[];
				// 	this.queryImgList();
				// }
				// this.queryHot();

				// this.filtersIndex2=-1;
				// let result=await api.getCategoryFilter({'type': 'linggan',subType:idx==1?'images':'image'});
				
				// if (result.code == 0) {
				// 	this.categorys = result.data
				// }
        

        this.scrollToSearch();
			},
      
			getUrlParams(){
				let _rParams=this.queryParams;
				let urlParams={}
				if(_rParams.imageColor)urlParams.imageColor=_rParams.imageColor;
				if(_rParams.title)urlParams.title=_rParams.title;
				if(_rParams.style)urlParams.style=_rParams.style;
				if(_rParams.categoryIds)urlParams.categoryIds=_rParams.categoryIds;
				if(_rParams.tags)urlParams.tags=_rParams.tags;
				if(_rParams.device)urlParams.device=_rParams.device;
				if(_rParams.orientation)urlParams.orientation=_rParams.orientation;
				if(_rParams.era)urlParams.era=_rParams.era;
				if(_rParams.paramImagesDescFunc)urlParams.paramImagesDescFunc=_rParams.paramImagesDescFunc;
				if(_rParams.paramImagesDescMaterial)urlParams.paramImagesDescMaterial=_rParams.paramImagesDescMaterial;
				urlParams.t=this.pageTab;
				return urlParams;
			},
			handleSearchByPic(e){
				let token = window.localStorage.getItem("token");
				if (!token) {
					this.$parent.showLogin({ loginType: 0 });
					return;
				}
				// 更改视图
				const displayNewImage = () => {
      				e.target.style.display = 'none'
      				this.isFocus = false
      				this.showSearchkeys = false
      				this.showPicToPic = true
      			}
      			// 浏览器不支持 View Transitions 时的回退方案：
      			if (!document.startViewTransition) {
      			  return displayNewImage()
      			}
      			// 使用视图过渡
      			document.startViewTransition(() => {
      			  return displayNewImage()
      			})
			},
			onInspKeyBoxFocus(){
				this.isFocus=true;
				this.showSearchkeys=true;
			},
			async handleBylikeSearch(e){
				let that=this;
				if (
					!e.target.value.trim() &&
					e.key != "ArrowLeft" &&
					e.key != "ArrowRight"
				) {
					this.globalSearchkeys = [];
					this.showSearchkeys = false;
					return;
				}
				if(e.key=='ArrowLeft'||e.key=='ArrowRight'){
					return;
				}
				if(e.key=='ArrowUp'||e.key=='ArrowDown'){
					if(e.key=='ArrowUp'){//上翻
						if(that.keySelectIndex==0){
							that.keySelectIndex=that.globalSearchkeys.length-1;
						}
						else{
							that.keySelectIndex--;
						}
					}else if(e.key=='ArrowDown'){//下翻
						if(that.keySelectIndex==that.globalSearchkeys.length-1){
							that.keySelectIndex=0;
						}else{
							that.keySelectIndex++;
						}
					}
						that.queryParams.title=that.globalSearchkeys[that.keySelectIndex].title;
					}else{
						if(e.target.value){
							if (time) {
								clearTimeout(time)
							}
							time = setTimeout(async function () {
								let res=await api.globalLikeSearchKeywor({type:that.pageTab==1?'linggan':'articleImage',keyword:e.target.value,pageNum:1,pageSize:6});
								that.keySelectIndex=-1;
								if(res.code==0){
									res.data.forEach(item=>{
										item.content=item.title.replace(new RegExp(`\(${e.target.value}\)`),'<em>'+e.target.value+'</em>');
									})
									that.globalSearchkeys=res.data;
									that.showSearchkeys=true;
								}
								time = undefined;
							}, 150)
						}else{
							this.globalSearchkeys=[];
							this.showSearchkeys=false;
						}
					}
				that.$forceUpdate();
			},
    handleCloseFilter(){
      this.showLfilter=false;
      document.body.style.overflow='inherit';
    },
    handleShowFilter(){
      this.showLfilter=true;
      document.body.style.overflow='hidden';
    },
    handlCloseImgColorTop(){
      if(this.showImgColorFnew)
      {
          this.showImgColorFnew=false;
          localStorage.setItem('IMG-COLOR-NYD',false);
      }
    },
    onColorRtoChange() {
        this.handlCloseImgColorTop();
        this.handleSearch();
    },
    handleClearClr(){
      this.queryParams.imageColor='';
      this.scrollToSearch();
      this.handleSearch();
    },
    async queryImgList() {
      var that = this;

      this.isloading = true;
      let pram=Object.assign({},that.queryParams);
      if(pram.pageNum==1){
          // this.list=this.$bhelper.vlist;
      }

      if(pram.rank=='全部游戏')pram.rank='';

      pram.pageSize=50;
      api.searchImgs(pram).then(result=>{

          let old = that.list;

          let datas=result.data.images.list;
          datas.forEach(item => {
              item.show=false;item.showOther=false;
              that.$bhelper.convertImgItem(item,that);
          })

          if(datas.length>0)
              that.queryParams.last=datas[datas.length-1].id;

              
          if(pram.pageNum==1){
            that.list=datas;
          }
          else{
            that.list = [...old, ...datas];
          }

          that.total = result.total;

          if ((result.data && (result.data.length < pram.pageSize || result.data.length == 0))||datas.length<pram.pageSize) {
              that.hasMore = false;
          } else {
              that.hasMore = true;
          }

          setTimeout(()=>{
              that.isloading = false;
          },300)
          setTimeout(()=>{
            that.scrollLoaded = true;
          },1000)
      }).catch(res=>{
          // that.list=[];
          that.isloading=false;
          // loading.close();
          that.isDataError=true;
      })
    },
    calculateTilt(corners){
        const{x:x1,y:y1}=corners[0];//左上
        const{x:x2,y:y2}=corners[1];// 右上
        // 计算 dy 和 dx
        const dy=y2-y1;
        const dx=x2-x1;
        //计算倾角(弧度->角度)
        const angle =Math.atan2(dy,dx)*(180 /Math.PI);
        // 返回角度
        return angle;
    },
    handlCloseImgColorTop(){
        if(this.showImgColorFnew)
        {
            this.showImgColorFnew=false;
            localStorage.setItem('IMG-COLOR-NYD',false);
        }
    },
    handleClearAll(){
      this.$refs['refFilterBy'].clearAll();

      this.showclearall=false;

      this.queryParams={
        colorrto:10,
        pageNum: 1,
        pageSize: 30,
        title:'',
        orderByColumn:'createTime',
        rank:this.pageTab==1?'首页推荐':'',
        categoryId:22,
        isAsc:'desc',
        categoryIds:'',
        device:''
      }
      

      this.scrollToSearch();

      this.handleSearch();
    },
    scrollToSearch(){
      $('body,html').animate({
        'scrollTop':$('.t-adv').length>0?498-84+20:$('.list-wrap-flex').offset().top-100
      },200);
    },
    chooseFun(item) {
        this.curTab=item?item.title:'';
        this.funs.map(item=>{
            item.selected=false;
        })
        if(item){
            item.selected=true;
            this.queryParams.title=item.title;
        }else{
            this.queryParams.title='';
        }
        this.handleSearch();
    },
    onFilterChange(_params, _type, _allCate) {
      // if(this.showLfilter)this.showLfilter=false;
      this.cateObj = _allCate;
      this.queryParams = _params;
      if (_type == '10') {
        if(this.pageTab!=2){
          this.pageTab=2;
        }else{
          this.handleSearch();
        }
      } else {
        this.handleSearch();
      }
      

      this.scrollToSearch();
    },
    onParamterClear(parent, sub) {
      // sub.selected=!sub.selected;
      this.$refs['refFilterBy'].handleSelSub(parent, sub);
    },
    onEnter(e){
      if(this.showFnew){
        this.handlCloseTop();
      }
      this.handleSearch(e);

      

      this.scrollToSearch();

      window.history.pushState({}, 0, '/'+(this.pageTab==1?'games':'screenshots')+(e.target.value?'?k='+e.target.value:''))
    },
    loadError(e){
        e.target.removeAttribute('srcset');
    },
    handlCloseTop(){
      this.showFnew=false;
      localStorage.setItem('GAMES-NYD',false);
    },
      onLoaded(e,item){
      let domainUrl=this.$imgdomainurl+'article-';
      let el=e.target;
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      let srcsets=[];
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x432.webp 1x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x432.webp 2x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x432.webp 3x');
      el.srcset=srcsets.join(',')
    },
    getimgObj(item){
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      return{
        src:this.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
        error: require('@/assets/loading_error.png'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
    },
			base64(str) {
    		    return Buffer.from(str).toString("base64").replace(/\//g, '%2F')
    		},
    handleXClear(){
      window.history.pushState({}, 0, '/'+(this.pageTab==1?'games':'screenshots'))
      this.queryParams.title='';
      // this.allCates.map(item=>{
      //   item.items.map(sub=>{
      //     sub.checked=false;
      //   })
      // })
      this.handleSearch();
    },
    loadMore(){
      this.queryParams.pageNum++;
      this.queryList();
    },
    docScroll(e){
      this.isFocus=false;
      this.showSearchkeys=false;
      $('#inspKeyBox').blur();
      let _scrollTop=document.documentElement.scrollTop;
      if(_scrollTop>0){
          if(!this.isScroll)
          {
              $('#app').addClass('is-scroll');
              this.isScroll=true;
          }
      }else{
          if(this.isScroll){
              $('#app').removeClass('is-scroll');
              this.isScroll=false;
          }
      }

      let top=$('#main_search').offset().top;
      if(_scrollTop>=top)
      {
          if(this.isScrollShow==false){
            this.isScrollShow=true;
            $('#app .pro-header .search-bx form').css('display','flex');
          }
      }else{
          if(this.isScrollShow==true)
          {
            this.isScrollShow=false;
            $('#app .pro-header .search-bx form').css('display','none');
          }
      }

      let isTrue=window.scrollY>$('.top-games').height();
      if(isTrue){
        if(!this.isScale){
          this.isScale=true;
        }
      }else{
        this.isScale=false;
      }
      let that=this;
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

      if (that.scrollLoaded == false) return
      if (jHeight <= 500 && that.hasMore) {
          if(!localStorage.getItem('token')){
            that.$parent.noLoginIsTak=false;
            that.$parent.showLoginView=true;
            that.isloading=false;
            window.removeEventListener('scroll',that.docScroll);
            return;
          }
          that.scrollLoaded = false;
          that.loadMore();
      }
    },
    chooseByCate(_item){
      this.allCates[2].items.map(item=>{
        item.checked=false;
        if(item.value==_item.value){
          item.checked=true;
        }
      })
      this.queryParams.categoryIds=_item.value;
      this.handleSearch();
      // this.queryParams.pageNum=1;
      // this.list=[];
      // this.scrollLoaded=false;
      // this.hasMore=true;
      
      // if(this.isAutoTakeTo){
      //   setTimeout(()=>{
      //     $('body,html').animate({
      //       'scrollTop':$('.top-games').height()+50
      //     },200);
      //   },500)
      // }
      // let that=this;
      // setTimeout(()=>{
      //   that.queryList();
      // },100)
    },
    chooseDevice(_device) {
        let that=this;

        let pd=this.cateObj.filter(r=>{
            return r.queryfield=='device';
        })
        let p=pd[0].items.filter(r=>{return r.value==_device});

        this.$refs['refFilterBy'].handleSelSub(pd[0],p[0]);

        // this.cateObj.map(item => {
        //     if (item.queryfield == 'device') {
        //     item.items.map(r => {
        //         r.selected = false;
        //         if (r.value == _device&&that.queryParams.device!=r.value) r.selected = true;
        //     })
        //     }
        // })
        // this.$refs['refFilterBy'].cateObj=this.cateObj;
        // this.$forceUpdate();
        // this.queryParams.device = _device == this.queryParams.device ? '' : _device;
        
        // this.handleSearch();
    },
    chooseScreen(_screen) {
        let pd=this.cateObj.filter(r=>{
            return r.queryfield=='orientation';
        })
        let p=pd[0].items.filter(r=>{return r.value==_screen});

        this.$refs['refFilterBy'].handleSelSub(pd[0],p[0]);

        // let that=this;
        // this.cateObj.map(item => {
        //     if (item.queryfield == 'orientation') {
        //     item.items.map(r => {
        //         r.selected = false;
        //         if (r.value == _screen&&that.queryParams.orientation!=r.value) r.selected = true;
        //     })
        //     }
        // })
        // this.queryParams.orientation = _screen == this.queryParams.orientation ? '' : _screen;

        // this.handleSearch();
        
    },
    getHisData(){
      let hisSearchData=localStorage.getItem('NEARHISRESULT');
      let hisBrowserData=localStorage.getItem('NEARBROWSERRESULT');
      
      if(hisSearchData){
        hisSearchData=JSON.parse(hisSearchData);
        hisSearchData=hisSearchData.reverse();
      }
      if(hisBrowserData){
        hisBrowserData=JSON.parse(hisBrowserData);
        hisBrowserData=hisBrowserData.reverse();
      }
      this.searchData=hisSearchData?hisSearchData:[];
      this.browserData=hisBrowserData?hisBrowserData:[];
    },
			nearHisAdd(){
				if(!this.queryParams.title){
					return;
				}
				let that=this;
				let nearHisResults=localStorage.getItem('NEARHISRESULT');
				if(!nearHisResults)
					nearHisResults=[];
				else{
					nearHisResults=JSON.parse(nearHisResults);
				}
				let has=nearHisResults.filter(r=>{
					return r==that.queryParams.title;
				})
				if(nearHisResults.length>=12)
					nearHisResults=nearHisResults.splice(1,12);
				if(has.length==0){
					nearHisResults.push(that.queryParams.title);
				}
				localStorage.setItem('NEARHISRESULT',JSON.stringify(nearHisResults));
			},
    handleSearch(e){
      // $('body,html').animate({
      //   'scrollTop':$('#mainfilter').offset().top-143+30
      // },200);
			this.getHisData();
      this.queryHot();
      this.nearHisAdd();
      if(this.queryParams.categoryIds||this.queryParams.device||this.queryParams.paramImagesDescFunc||this.queryParams.paramImagesDescMaterial||this.queryParams.style||this.queryParams.tags||this.queryParams.orientation||this.queryParams.era)
      {
        this.showclearall=true;
      }else{
        this.showclearall=false;
      }
      this.queryParams.last='';
      if(e)e.target.blur();
      this.queryParams.pageNum=1;
      this.list=[];
      this.scrollLoaded=false;
      this.hasMore=true;
      this.isDataError=false;

      let that=this;
      setTimeout(()=>{
        that.isFocus=false;
        that.showSearchkeys=false;
      },200)

      this.queryList();
    },
    onInfoClose(){
      window.history.pushState({}, 0,this.curFullPath);
      document.body.style.overflow='inherit';
      this.showInfo=false;
    },
    handleShowInfo(_item){
      window.history.pushState({}, 0, '/game/'+_item.id);
      this.currentId=_item.id;
      document.body.style.overflow='hidden';
      this.showInfo=true;
    },
    handleCancelAllCate() {
      this.allCates.map((item) => {
        item.result.map((cate) => {
          cate.checked = false
        })
      })
      this.$forceUpdate()
      this.handleSearch();
    },
    handleConfirmSelectCate() {
      let datas = this.allCates.filter((r) => {
        return r.key == 'tags'
      })[0].result;

      let tags=[];
      datas.map(item=>{
        if(item.checked){
          tags.push(item.title);
        }
      })
      datas = this.allCates.filter((r) => {
        return r.key == 'style'
      })[0].result;

      let style='';
      datas.map(item=>{
        if(item.checked){
          style=item.title;
        }
      })

      let categoryIds=[];
      datas = this.allCates.filter((r) => {
        return r.key == 'categoryIds'
      })[0].result;
      datas.map(item=>{
        if(item.checked){
          categoryIds.push(item.value);
        }
      })

      datas = this.allCates.filter((r) => {
        return r.key == 'era'
      })[0].result;

      let era='';
      datas.map(item=>{
        if(item.checked){
          era=item.title;
        }
      })

      this.queryParams.tags=tags;
      this.queryParams.style=style;
      this.queryParams.categoryIds=categoryIds;
      this.queryParams.era=era;
      // this.queryParams.pageNum=1;
      // this.list=[];
      // this.scrollLoaded=false;
      // this.hasMore=true;
      // this.queryList();
      this.handleSearch();
    },
    handleSelSub(_cate) {
      if(this.curAllCateKey=='style'||this.curAllCateKey=='era'){
        if(_cate.checked){
          _cate.checked=!_cate.checked;
        }
        else{
          this.curCates.map(item=>{
            item.checked=false;
          })
          _cate.checked=true;
        }
        this.$forceUpdate()
        this.handleConfirmSelectCate();
        return;
      }
      if (_cate.checked) {
        _cate.checked = !_cate.checked;
      } else {
        _cate.checked = !_cate.checked
      }

      this.$forceUpdate();
      this.handleConfirmSelectCate();
    },
    chooseCateByKey(idx,_key) {
      this.cateIdx=idx;
      this.keyword=''
      this.curAllCateKey = _key;
      this.curCates = this.allCates[idx].result;
    },
    handleLoadingMore() {
      this.queryParams.pageNum++
      this.queryList()
    },
    queryList(){
      if(this.pageTab==1){
        this.queryGameList();
      }else{
        this.queryImgList();
      }
    },
    async queryGameList() {
      var that = this

      // const loading = this.$loading({
      //   lock: true,
      //   text: '努力加载中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      this.isloading=true;
      if(that.queryParams.pageNum==1){
        that.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
      }
      let result = await api.articlelist(that.queryParams);
      
      if(that.queryParams.pageNum==1){
          that.list=[];
      }
      setTimeout(()=>{
          that.isloading = false;
      },300)

      let old = that.list

      let domainUrl=that.$imgdomainurl;
      result.data.map(item=>{
        item.show=false;
        let _vtime=null;
        if(item.updateTime){
          _vtime=item.updateTime;
        }else if(item.createTime){
          _vtime=item.createTime;
        }else if(item.create_time){
          _vtime=item.create_time.replace('T',' ');
        }
        _vtime=Math.abs(new Date(_vtime).getTime());
        let srcsets=[];
        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
        item.srcsets=srcsets.join(',')
        item.lazy={
          src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
          error: require('@/assets/loading_error.png'),
          loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        }
      })
      that.list = [...old, ...result.data]

      that.total = result.total

      let totalPage = result.total % that.queryParams.pageSize == 0 ? result.total / that.queryParams.pageSize : parseInt(result.total / that.queryParams.pageSize) + 1
      if (result.data && (result.data.length < that.queryParams.pageSize || that.queryParams.pageNum >= totalPage)) {
        that.hasMore = false
      } else {
        that.hasMore = true
      }
      setTimeout(()=>{
        that.scrollLoaded = true;
      },1000)
    },
    version(time) {
      let date = new Date(time)
      return date.getTime()
    },
    handleGmCatePrev() {
      this.gmswiper.slidePrev()
    },
    handleGmCateNext() {
      this.gmswiper.slideNext()
    },
  }
}
</script>

<style lang="less">
.games-page {
  // min-height: 1500px;
  padding-bottom:200px;
.st-cnt-area{
  color: #fff;
  font-size: 46px;
  text-align: center;
  position: relative;
  z-index: 1;
  line-height: 45px;
}
.st-cnt-area span{
	color:#11CCB1;
	font-weight: bold;
	position: relative;
	z-index: 1;
}
.st-cnt-desc{
	color:#fff;
	text-align: center;
	font-size:16px;
	position: relative;
	z-index: 1;
	line-height:16px;
	margin-top:20px;
}
.cap-search-box{
	border-radius:6px;
	margin-top:32px;
	width:890px;
	position: relative;
	z-index: 1;
}
.cap-search-box .wrapper{
	position: relative;
}
.cap-search-box .wrapper .search{
	display: flex;
	width:100%;
	background:#fff;
	border-radius:4px;
	overflow: hidden;
	align-items: center;
	padding:0px 10px 0px 20px;
}
.cap-search-box .search-types{
	display: flex;
	/* width:320px; */
	width:240px;
	align-items: center;
	line-height:45px;
}
.cap-search-box .search-types .btns{
	border-left:1px solid #ddd;
	margin-left:20px;
}
.cap-search-box .search-types .btns span{
	display: inline-block;
	line-height:30px;
	border-radius:6px;
	font-size: 14px;
	min-width:60px;
	text-align: center;
	cursor: pointer;
	margin-left:20px;
	font-weight:500;
	transition:.2s all linear;
}
.cap-search-box .search-types .btns span:hover{
	background:#000;
	color:#fff;
}
.cap-search-box .search-types .btns .active{
	background:#000;
	color:#fff;
}
.capt-icon{
	margin-left:20px;
	height:20px;
	width:25px;
	background:url('../assets/cap_pic_icon.png') no-repeat;
	background-size:100% 100%;
	background-size: cover;
	cursor: pointer;
}
.capt-icon:hover{
	opacity:.6;
}
.capt-dialog-box{
	background:#fff;
	position: absolute;
	width:100%;
	height:201px;
	top:50px;
	z-index: 111;
	border-radius:4px;
}
.capt-dialog-box .drag-box{
	text-align: center;
	font-size:18px;
	width:848px;
	line-height:84px;
	background:#F6F6F6;
	border:1px dashed #D9D9D9;
	margin:20px auto 26px auto;
	font-weight:500;
	box-sizing: border-box;
	color:#000;
}
.default-red-btn{
	display: block;
	margin:0 auto;
	width:170px;
    line-height: 44px;
    border-radius: 5px;
    color: #fff;
	text-align: center;
    font-size: 16px;
    padding: 0 18px;
	user-select: none;
    background: #f71808;
    background: linear-gradient(to right,#f61407,#ff5014);
}
.default-red-btn:hover{
	opacity:.6;
}

.capt-dialog-close{
transition:.1s all linear; position:absolute;width:13px;height:13px;right:10px;bottom:10px;background:url(../assets/images/close.png) center no-repeat;z-index:10;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover}
.capt-dialog-close:hover{
    transform: rotate(180deg);
    cursor: pointer;
}
.keyword-input{
	width:99%;
	height:40px;
	font-size: 18px;
	padding-left:5px;
	box-sizing: border-box;
	border:none !important;
}
.keyword-input:focus{
	border:none !important;
}
.keyword-search-btn{
	font-size:18px;
	cursor: pointer;
	width:25px;height:15px;
	background:url('../assets/search.png') no-repeat;
	background-size: contain;
}
.keyword-search-btn:active{
	opacity:.6;
}


input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff;
}

.filter-type{
	display: flex;
	margin-bottom:20px;
}
.filter-type .cus-tom-drdwn,.filter-type .cus-tom-drdwn .el-button{
	width:100%;
}
.filter-type .cus-tom-drdwn .el-button i{
	float: right;
}

.filter-type .el-select,.filter-type .cus-tom-drdwn{
	margin-right:11px;
}

.filter-type .el-select:last-child,.filter-type .cus-tom-drdwn:last-child{
	margin-right:0px;
}

.fixed-capt-dialog-mask{
	background:#000;
	width:100%;
	height:100%;
	top:320px;
	position: absolute;
	opacity:.3;
}
.cap-history{
	padding:20px 0px 20px 48px;
	box-sizing: border-box;
}
.cap-history p{
	color:#999;
	font-weight:500;
	font-size:14px;
	margin-bottom:5px;
}
.cap-history div{
	margin-bottom:10px;
	font-size:16px;
}
.cap-history div a{
	display: inline-block;
	margin-right:10px;
	background:#F1F2F1;
	padding:5px 10px;
	border-radius:4px;
	color:#101010;
	font-weight:500;
	font-size:18px;
	box-sizing: border-box;
}
.cap-history div a:hover{
	background:#D2D2D2;
}
.cap-history div a.active{
	background:#D2D2D2;
}

.ul-imgtxtq1 .top{
	display: flex;
	align-items: center;
	margin-bottom:0px;
}
.ul-imgtxtq1 .top .name{
	width:100%;
}
.ul-imgtxtq1 .top .rr{
	width:100%;
	display: flex;
	justify-content: flex-end;
}
.ul-imgtxtq1 .top .rr span{
	margin-left:0px !important;
	float:none !important;
}
.ul-imgtxtq1 .top .rr span:last-child{
	margin-left:20px !important;
}
.ul-imgtxtq1 li{
	width:360px;
	padding:0px;
	margin-right:20px;
	margin-bottom:40px;
}
.ul-imgtxtq1 .pic .basic-info{
	position: absolute;
	width:100%;
	bottom:17px;
	left:0px;
	color:#fff;
	z-index:1;
	padding:0px 0px 0px 10px;
	opacity:0;
	transition:.3s all linear;
}
.ul-imgtxtq1 .pic .basic-info span{
	display: block;
}
.ul-imgtxtq1 .pic .basic-info .title{
	font-size:14px;
	margin-bottom:5px;
	font-weight:500;
}
.ul-imgtxtq1 .pic .basic-info .ss{
	font-size:12px;
	font-weight:500;
}
.ul-imgtxtq1 .pic .con-mask{
	background:linear-gradient(transparent,#000);
	position: absolute;
	width:100%;
	height:50%;
	bottom:0px;
	left:0px;
	opacity:0;
	transition:.3s all linear;
}

.ul-imgtxtq1 a:hover .pic .logs{
opacity: 0;
}
.ul-imgtxtq1 a:hover .basic-info,.ul-imgtxtq1 a:hover .con-mask{
	opacity:1;
}
.ul-imgtxtq1 .pic .logs{
	position: absolute;
	width:100%;
	left:0px;
	top:0px;
	z-index: 1;
	height:40px;
	padding:10px 0px 0px 10px;
	display: flex;
	justify-content: space-between;
	transition:.2s all linear;
}
.ul-imgtxtq1 .pic .logs span{
	display:inline-block;
}
.ul-imgtxtq1 .pic .logs .video-v-icon{
	width:20px;height:16px;
	background:url('../assets/nine/video.png') no-repeat;
}

.ul-imgtxtq1 .pic .logs .new-n-icon{
	width:16px;height:16px;
	background:url('../assets/nine/n.png') no-repeat;
}
.ul-imgtxtq1 .pic .logs .hot-h-icon{
	width:16px;height:16px;
	background:url('../assets/nine/h.png') no-repeat;
}

.ul-imgtxtq1 .pic .logs .other-group span{
	margin-right:10px;
}

.new-pageation-btn{
	text-align: center;
	margin-bottom:40px;
	margin-top:4px;
	clear: both;
}
.new-pageation-btn a{
	line-height:44px;
	width:132px;
	text-align: center;
	border:1px solid #0abba4;
	display: block;
	margin:0 auto;
	color:#fff;
	background:#0abba4;
	border-radius:4px;
	font-size:16px;
}

.new-pageation-btn a:hover{
	opacity:.8;
}

.custom-down-menu{
	/* max-width: 30%; */
	padding:20px 0px 30px 20px !important;
	border:1px solid #F82A0D;
	box-shadow: 0px 0px 15px 0px #8a8a8a !important;
}
.custom-down-menu p{
	font-weight:500;
	font-size:16px;
	padding-left:7px;
	margin-bottom: 20px;
	color:#000;
}
.custom-down-menu .ddl-menu-item{
	display: inline-block;
	line-height: 30px;
	margin-right:10px;
	font-size:14px;
	padding:0px 10px;
	margin-bottom:5px;
	transition:.1s all linear;
	cursor: pointer;
}
.custom-down-menu .ddl-menu-item i{
	width:max-content;
	font-style: normal;
	border-radius:4px;
	display: inline-block;
	padding:0px 15px;
}
.custom-down-menu .ddl-menu-item.active i{
	background: linear-gradient(to right,#f61407,#ff5014);
    color: #fff;
}
.custom-down-menu .ddl-menu-item i:hover{
	background:linear-gradient(to right,#f61407,#ff5014);
	color:#fff;
}
.pic-key{
	position: absolute;
	top:6px;
	left:51px;
}
.pic-key img{
	width:70px;height:33px;
	object-fit: cover;
}
.ul-listl2{
	/* margin-left:0px !important;
	margin-bottom:20px !important; */
}
.ul-listl2.ls li{
	width:11.6%;
	padding:0px;
}
.ul-listl2.ls li:last-child{
	margin-right:0px !important;
}


.ul-imgtxtl2 li .con{
	display: flex;
	align-items: center;
}
.ul-imgtxtl2 li:last-child{
	border-bottom:none !important
}

.ul-imgtxtl2 .con .txts .stit{
	margin-bottom:0px !important;
	font-weight:normal !important;
}


.ul-imgtxtl2 .con .pic img{
	width:50px !important;
	height:37px !important;
}


.add-new-collec-btn{    
	display: inline-block;
    width: 100px;
    line-height: 44px;
	font-size:14px;
	cursor: pointer;
	font-weight:bold !important;
}
.add-new-collec-btn em{
	width:18px;height:18px;
	border-radius:50%;
	background:linear-gradient(to right,#f61407,#ff5014);
	display: inline-block;
	line-height: 18px;
	color:#fff;
	font-weight:bold !important;
	margin-right:5px;
}
.flex-center{
	display: flex !important;
	padding:0px 20px !important;
	align-items: center !important;
	justify-content:center !important;
}
.flex-between{
	display: flex !important;
	padding:0px 20px !important;
	align-items: center !important;
	justify-content:space-between !important;
}

.custom-input{
	    display: block;
    width: 100%;
    height: 45px;
    line-height: 43px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    font-size: 14px;
    color: #333;
    padding: 0 50px 0 20px;
}


.custom-rd-btn{
	display: block;
	width:170px;
    line-height: 44px;
    border-radius: 5px;
    color: #fff;
	text-align: center;
    font-size: 16px;
    padding: 0 18px;
	user-select: none;
    background: #f71808;
    background: linear-gradient(to right,#f61407,#ff5014);
}
.custom-rd-btn:hover{
	opacity:.6;
}

.pic-basic-info{
	position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    color: #fff;
    z-index: 1;
    padding: 0px 0px 10px 10px;
    opacity: 0;
    transition: .3s all linear;
}


.meo-opts{
	position: absolute;
	top:10px;
	right:0px;
	opacity:0;
	transition:.3s all linear;
}

.mod-op-bar-active{
	opacity:1;
}
.meo-opts .new-be-simliar-icon{
  background-image:url('../assets/eleven/new_like.png');
  background-repeat: no-repeat;
  background-color:#fff;
  border-radius:8px;
  background-position: center;
  width:32px;height:32px;
}
.meo-opts .new-like-icon{
  background-image:url('../assets/eleven/pic_zan.png');
  background-repeat: no-repeat;
  background-color:#fff;
  border-radius:8px;
  background-position:50% 5px;
  font-size:14px;
  padding-top:20px;
  text-align: center;
}
.meo-opts .new-liked-icon{
  background-image:url('../assets/eleven/pic_zaned.png');
  background-repeat: no-repeat;
  background-color:#fff;
  border-radius:8px;
  background-position:50% 5px;
  font-size:14px;
  padding-top:20px;
  text-align: center;
}
.meo-opts a{
  color:#010101;
  position: relative;
  overflow: inherit !important;
  vertical-align: middle;
  user-select: none;
}
.meo-opts a .s-mini-tip{
  position: absolute;
  top:-50px;
  left:-20px;
  font-style: normal;
  background:#1C2033;
  color:#fff;
  border-radius:4px;
  line-height:38px;
  padding:0px 14px;
//   z-index:-1;
//   opacity:0;
  transition:.2s all linear;
  white-space: nowrap;
  display:none;
}
.meo-opts a:hover{
  background-color:#EBEDF5;
}
.meo-opts a:hover .s-mini-tip{
//   opacity:1;
//   z-index: 1;
display: inline-block;
}

.pic-basic-info .title{
	font-size: 14px;
	margin-bottom:5px;
	display: inline-block;
	color:#fff;
}
.pic-basic-info .tags a{
	display: inline-block;
	line-height:20px;
	padding:0px 5px;
	border-radius:6px;
	border:1px solid #fff;
	margin-right:5px;
	margin-top:5px;
	color:#fff;
	background:#000;
}
.flex-images .item{
	cursor: pointer;
	border-radius:4px;
	overflow: hidden;
	margin:5px;
	width:24%;
}
.flex-images .item:hover img{
	transform: scale(1.08);
}
.flex-images .item:hover .pic-basic-info{
	opacity:1;
}
.flex-images .item:hover .con-mask{
	opacity:1;
}
.flex-images .con-mask{
	background:linear-gradient(transparent,#000);
	position: absolute;
	width:100%;
	height:50%;
	bottom:0px;
	left:0px;
	opacity:0;
	transition:.3s all linear;
}
.flex-images .item:hover .meo-opts{
	opacity:1;
}
.meo-opts a{
	display:inline-block !important;
	width:43px;
	height:44px;
	margin-right:10px;
	/* opacity:.8; */
}
.meo-opts a:hover{
	/* opacity:1; */
	cursor: pointer;
}
.be_simliar_icon{
	background:url('../assets/be_simliar_icon.png') no-repeat;
}
.collection_icon{
	background:url('../assets/collection_icon.png') no-repeat;
}
.collection_quickly_icon{
	background:url('../assets/nine/quick_fav.png') no-repeat;
}


.custom-down-menu-item-single-row span{
	display: block !important;
	width:max-content;
}

.m-topl{
	border-bottom:1px solid #F5F5F5;
	display: flex;
    align-items: center;
}
.m-topl>div:first-child,.m-topl>ul{
	width:100%;
}
.m-topl .btn{
    top: 8px;
}
.m-topl .cur {
    position: relative !important;
    top: 0px !important;
}

.item-width-70 span{
	width:90px;
}
.item-width-90 span{
	width:110px;
}
.filter-type .cus-tom-drdwn button{
	line-height: 45px;
    height: 45px;
	padding:0px 20px !important;
	text-align:left;
}

.muneView-year{
	height:200px;
	overflow-y: auto;
}

/*滚动条整体部分,必须要设置*/
.muneView-year::-webkit-scrollbar{
  width: 5px;
  height: 8px;
  background-color: transparent;
}
/*滚动条的轨道*/
.muneView-year::-webkit-scrollbar-track{
  background-color: transparent;
}
/*滚动条的滑块按钮*/
.muneView-year::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background-color: rgb(187 187 187);
}
/*滚动条的上下两端的按钮*/
.muneView-year::-webkit-scrollbar-button{
  height: 0;
}
 
/* 两个滚动条的交汇处 */
.muneView-year::-webkit-scrollbar-corner{
  background-color: transparent;
}

.remove-keyword-btn{
	font-size:18px;
	cursor: pointer;
}
.remove-keyword-btn:hover{
	color:#11CCB1;
}




.grid-item .img-bbox{
	display: flex;
}

.grid-item:hover .img-bbox img{
	transform: scale(1.08);
}
.grid-item:hover .pic-basic-info{
	opacity:1;
}
.grid-item:hover .con-mask{
	opacity:1;
}
.con-mask{
	background:linear-gradient(transparent,#000);
	position: absolute;
	// width:calc(100% - 10px);
	height:15%;
	bottom:0px;
	left:0px;
	right:0px;
	opacity:0;
	transition:.3s all linear;
	border-radius:16px;
}
.grid-item:hover .meo-opts{
	opacity:1;
}

#parentBox{
	margin-bottom:60px;
}

.wrap-grid-item-box{
	width:100%;
}


 .wall-column {
    display: block;
    position: relative;
    width: 24%;
    float: left;
    box-sizing: border-box;
}
/* .grid-item{
	position: relative;
	top:5px;left:5px;
	list-style-type: none;
	width:100%;
	height:100%;
	padding:5px;
	cursor: pointer;
	overflow: hidden;
}
.grid-item img{
	width:100%;
	height:100%;
} */


.un-find-opbtns{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top:70px;
}

.un-find-opbtns a{
	user-select: none;
}
.un-find-opbtns a:hover{
	opacity:.8;
}
.un-find-opbtns a:first-child{
	display: block;
	padding:0px 10px;
	width:170px;
    height: 40px;
    font-size: 16px;
	transition:.1s all linear;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background: #28cfb0;
    border-radius: 6px;
    overflow: hidden;
	margin-right:40px;
}

.un-find-opbtns a:last-child{
	display: block;
	padding:0px 10px;
	width:170px;
    height: 40px;
	transition:.1s all linear;
    font-size: 16px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background:#28cfb0;
    border-radius: 6px;
    overflow: hidden;
	margin-right:40px;
}













































/* 流式布局 */

  .container-water-fall{
	padding:10px 3%;
	width: 100vw;
	box-sizing: border-box;
}

 .cell-item{
	 background: #ffffff;
	 border-radius: 10px;
	 overflow: hidden;
	 box-sizing: border-box;
	  margin:10% 0;
 }
 .cell-item img {
	 width: 100%;
height: auto;
display: block;
 }

  .item-descA {
	font-size: 17px;
color:rgba(46,44,42,1);
line-height: 17px;
font-weight: bold;
margin:11.5px 0 13px 9px;
}

  .item-descB {
	font-size:12px;
font-weight:500;
color:rgba(89,89,89,1);
line-height:17px;
 margin:11.5px 0 13px 9px;
}

  .item-footer {
	margin-top: 22px;
position: relative;
display: flex;
align-items: center;
}

  .name {
	max-width: 150px;
margin-left: 10px;
font-size: 14px;
color:#999999;
}

  .tech-list-ll .tab-bottom{
	padding:10px 0 !important;
	height:0 !important;
	background:#fafafa !important;
	}




.ul-imgtxtq1 .name{
	margin-left:0px !important;
}

.query-keyword{
	color:#aaaaaa;
}
.query-keyword i{
	font-style: normal;
	color:#000;
	font-weight:bold;
	margin-right:10px;
}


.m-animate-area{
	width:100%;
	height:100%;
	position: absolute;
	left:0px;top:0px;
}
.iframe-animal-btn{
	    color: #fff;
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: #404040;
    padding: 0px 5px;
}

.new-inspiration-filter-bar{
	display: flex;
	/* flex-wrap: wrap; */
	line-height:61px;
	justify-content: space-between;
	align-items: center;
	border-bottom:1px solid #F2F2F2;
	background:#FCFCFC;
}
.new-ip-flb-right{
	display: flex;
	width:100%;
	justify-content: space-between;
	padding-left:24px;
	// padding-right:80px;
	padding-right:70px;
}
.new-ip-flb-r-ddls{
	display: flex;
	align-items: center;
}
.new-ins-con-box-left-menus{
	min-width:240px;
	border-right:1px solid #F2F2F2;
    //height:calc(100vh - 80px);
	height:100vh;
    overflow-y:auto;

	position: sticky;
    top:78px;
	padding-bottom:78px;
}
.new-ins-con-box-left-menus>ul{
	padding-left:25px;
	position: relative;
	/* margin-right:25px; */
	/* border-bottom:1px solid #F2F2F2; */
	padding-top:25px;
	padding-bottom:10px;
}
.new-ins-con-box-left-menus>ul:after{
	content:'';
	background:#F2F2F2;
	height:1px;
	width:95%;
	position: absolute;
	bottom:0px;
	left:0px;
}
.new-ins-con-box-left-menus>ul:last-child:after{
	display: none;
}
.new-ins-con-box-left-menus>ul:last-child{
	border-bottom:none;
}
.new-ins-con-box-left-menus>ul>li{
	font-size:18px;
	color:#232323;
	font-weight:500;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	user-select: none;
}
.new-ins-con-box-left-menus>ul>li:after{
	content:'';
	background:url('../assets/nine/arrow_up.png') no-repeat;
	width:11px;height:6px;
	display: inline-block;
	position:absolute;
	right:15px;
	transform:rotate(180deg);
	transition:.3s all linear;
}

.new-ins-con-box-left-menus>ul>li.collapse-ins-cir:after{
	transform: rotate(0deg);
}

.con-box-left-menu-subs li{
	display: flex;
	margin-bottom:15px;
	cursor: pointer;
	font-size:16px;
	align-items: center;
	position: relative;
}
.con-box-left-menu-subs li i{
	position: absolute;
	right:10px;
	font-size:14px;
	color:#BABABA;
	font-style: normal;
}
.con-box-left-menu-subs li:before{
	content:'';
	width:20px;height:20px;
	background:url('../assets/nine/rdo.png') no-repeat;
	display: inline-block;
	margin-right:10px;
	vertical-align: middle;
}
.con-box-left-menu-subs li.view-any-others{
	color:#11CCB1;
	font-size:14px;
	padding-left:30px;
	margin-bottom:0px;
}
.con-box-left-menu-subs li.view-any-others:before{
	display:none;
}
.con-box-left-menu-subs li.active:before{
	content:'';
	width:20px;height:20px;
	background:url('../assets/nine/rdo_selected.png') no-repeat;
	display: inline-block;
	margin-right:10px;
	vertical-align: middle;
}

.new-inspiration-con-box{
	display: flex;
	/* flex-wrap: wrap; */
}
.new-ip-flb-left{
	min-width:240px;
	display:flex;
	justify-content: space-between;
	padding-right:16px;
	padding-left:25px;
	font-weight:500;
	border-right:1px solid #F2F2F2;
}
.new-ip-flb-left .fl-label{
	font-size:18px;
	margin-right:10px;
	background:url('../assets/nine/filter.png') no-repeat;
	background-position:left;
	padding-left:22px;
}

.new-ip-flb-left .fl-clear{
	font-size:14px;
	color:#11CCB1;
}

.new-ip-flb-r-types{
	font-size:16px;
	display: flex;
	align-items: center;
	.box-con{
		height:44px;
		display: flex;
		align-items: center;
		border:1px solid #DEDEE6;
		padding:5px;
		border-radius:8px;
		span:first-child{
			margin-right:5px;
		}
		span{
			// margin-right:20px;
			color:#333;
			position: relative;
			display:inline-block;
			cursor: pointer;
			min-width:80px;
			text-align: center;
			user-select: none;
			line-height:32px;
			border-radius:8px;
			transition:.2s all linear;
			&:hover{
				color:#fff;
				background:#11CCB0;
			}
		}
		.active{
			color:#fff;
			background:#11CCB0;
		}
	}
}

.flb-r-ddls-item{
	height:44px;
	font-size:16px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	&:first-child{
		margin-right:10px;
	}
	.flb-box{
		height:44px;
		border:1px solid #DEDEE6;
		padding:8px;
		line-height:initial;
		border-radius:8px;
		display: flex;
		align-items: center;
		>span{
			color:#B0B0B0;
		}
	}
}
.flb-r-ddls-item>span{
	color:#AAAAAA;
}

.con-box-left-menu-subs li.cbox-menu-search{
	background-color:#f6f6f6;
	padding-left:10px;
	border-radius:6px;
	overflow: hidden;
}
.con-box-left-menu-subs li.cbox-menu-search input{
	line-height: 30px;
    border: 1px solid #f6f6f6;
    padding-left:20px;
	background-color:#f6f6f6;
	border-radius:0px;
	background-image:url('../assets/nine/search.png');
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: left;
}
  .con-box-left-menu-subs li.cbox-menu-search:before{
	  display:none;
      /* background:url('../assets/nine/search.png') no-repeat;
	  background-size: 14px 14px;
		width: 14px;
		height: 14px;
		margin-right: 5px;
		margin-left: 5px; */
  }



.waterfall-grid{
	display:flex;
	flex-wrap: wrap;
	margin:0px !important; 
	position: relative;
}
.waterfall-grid .grid-item{
	margin:0px 20px 24px 0px;
	width: 24%;
	height:max-content;
}
.waterfall-grid .grid-item:nth-child(4n){
	margin-right:0px;
}

.vue-waterfall{
	overflow:visible !important;
}
.picture-box{
    display: flex;
    flex-wrap: wrap;
	.picture-item{
		width: 24%;
		margin-bottom: 20px;
		margin-right: 1%;
		position: relative;
		cursor: pointer;
		border-radius: 6px;
		height: max-content;
		.img-box{
			overflow:hidden;
		}
		.orientation-shu-screen-img-box{
			text-align: center;
			background: #f9fafc;
			img{
				width:100%;
			}
		}
		img{
			border-radius: 6px;
		}
		.meo-opts{
			position: absolute;
			top: 10px;
			right: 0;
			opacity: 0;
			transition: all .3s linear;
		}

		&:hover{
			.img-box img{
				// transform: scale(1.08);
			}
			.pic-basic-info,.meo-opts,.con-mask{
				opacity: 1;
			}
		}
	}
}
// .picture-box{
//     // padding:0px 25px 20px 25px;
// 	border:1px solid red;
// 	display: inline-block;
//     position: relative;
//     width: 100%;
//     height: 100%;
// 	// .picture-item{
// 	// 	will-change: transform;
// 	// 	position: absolute;
// 	// 	top: 0;
// 	// 	left: 0;
// 	// 	.img-box{
// 	// 		display: block;
// 	// 		width: 240px;
// 	// 		max-height:500px;
// 	// 		overflow:hidden;
// 	// 		// overflow: hidden;
// 	// 		border-radius: 12px;
// 	// 	}
// 	// }

// 	.picture-item{
// 		// width: 24%;
// 		// margin-bottom: 20px;
// 		// margin-right: 1%;
// 		// position: relative;
// 		// cursor: pointer;
// 		// border-radius: 6px;
// 		// height: max-content;
// 		.img-box{
// 			// overflow:hidden;
// 			// height:100%;
// 			//border:1px solid red;
// 		}
// 		.orientation-shu-screen-img-box{
// 			text-align: center;
// 			background: #f9fafc;
// 			height:100%;
// 			img{
// 				width:100%;
// 			}
// 		}
// 		img{
// 			border-radius: 6px;
// 		}
// 		.meo-opts{
// 			position: absolute;
// 			top: 10px;
// 			right: 0;
// 			opacity: 0;
// 			transition: all .3s linear;
// 		}

// 		&:hover{
// 			.img-box img{
// 				// transform: scale(1.08);
// 			}
// 			.pic-basic-info,.meo-opts,.con-mask{
// 				opacity: 1;
// 			}
// 		}
// 	}

// 	.waf-ligan-item{
//             //margin-right:24px;
            
// 			// max-height:550px;
//             // margin-bottom:22px;
//             // cursor: pointer;
//             // box-shadow: 0 1px 3px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 2%);
// 			// overflow: hidden;
// 			// border-radius:10px;
// 			// position:relative;
//             .img-box{
// 				position: relative;
// 				cursor: zoom-in;
// 				// // overflow: hidden;
// 				// // max-height:100%;
// 				// height: 100%;
// 				.meo-opts{
// 					right:10px;
// 				}
// 				img{
// 					width:293px;
// 					border-radius:10px;
// 					// height:100%;
// 				}

// 				.mod-op-bar{
// 					position: absolute;
// 					right:30px;
// 					top:8px;
// 					transition:.2s all linear;
// 					opacity:0;
// 					display: flex;
// 					>a{
// 						margin-left:4px;
// 					}
// 					.new-like-icon:hover,.new-liked-icon:hover{
// 						background-color:#EBEDF5;
// 					}
// 					.like{
// 						width:43px;height:44px;
// 						display: inline-block;
// 						background:url('../assets/eleven/like_btnbg.png') no-repeat;
// 					}
// 					.op-more{
// 						width:43px;height:44px;
// 						display: inline-block;
// 						background:url('../assets/eleven/mood_op_more.png') no-repeat;
// 						position: relative;
// 						>dl{
// 							position: absolute;
// 							top:40px;width:90px;
// 							right:0px;
// 							z-index:2;
// 							border-radius:5px;
// 							display: none;
// 							padding-top:20px;
// 							dd{
// 								background:#fff;
// 								border-radius:5px;
// 								a{
// 									line-height:44px;
// 									width:90px;
// 									border-radius:5px;
// 									display: inline-block;
// 									text-align: center;
// 									color:#000;
// 								}
// 								a:hover{
// 									background:#FAFAFA;
// 								}
// 							}
// 							dd:first-child,dd:first-child a{
// 								border-bottom-left-radius:0px;
// 								border-bottom-right-radius:0px;
// 							}
// 							dd:first-child{
// 								border-bottom:1px solid #eee;
// 							}
// 							dd:last-child,dd:last-child a{
// 								border-top-left-radius:0px;
// 								border-top-right-radius:0px;
// 							}
// 						}
// 						>dl:after{
// 							content: '';
// 							width: 14px;
// 							height: 7px;
// 							background: url() center center no-repeat;
// 							-ms-background-size: cover;
// 							background-size: cover;
// 							position: absolute;
// 							top:13px;
// 							right: 15px;
// 							left: inherit;
// 						}
// 					}
// 					.new-like-icon{
// 						background-image:url('../assets/eleven/pic_zan.png');
// 						background-repeat: no-repeat;
// 						background-color:#fff;
// 						border-radius:8px;
// 						background-position:50% 5px;
// 						font-size:14px;
// 						padding-top:20px;
// 						text-align: center;
// 						width: 43px;
// 						height: 44px;
// 						color:#000;
// 						display: inline-block;
// 						border:1px solid #E9EBF4;
// 					}
// 					.new-liked-icon{
// 						background-image:url('../assets/eleven/pic_zaned.png');
// 						background-repeat: no-repeat;
// 						background-color:#fff;
// 						border-radius:8px;
// 						background-position:50% 5px;
// 						font-size:14px;
// 						padding-top:20px;
// 						text-align: center;
// 						color:#000;
// 						width: 43px;
// 						height: 44px;
// 						display: inline-block;
// 					}
// 					.op-more:hover{
// 						>dl{
// 							display: inline-block;
// 						}
// 					}
// 				}
// 				.mod-op-bar-active{
// 					opacity:1;
// 				}

				
// 				.is-gif-icon{
// 					background:url('../assets/eleven/gif_icon.png') no-repeat;
// 					background-position:bottom;
// 					width:32px;height:24px;
// 					position: absolute;
// 					bottom:34px;
// 					left:10px;
// 				}
// 			}
//         }
//         .waf-ligan-item:hover{
//             .meo-opts,.pic-basic-info,.con-mask{
//                 opacity:1;
//             }
//             .is-gif-icon{
//                 display: none;
//             }
//         }
//     }

//     .waf-lingans:after{
//         content:'';
//         clear: both;
//         display: inline-block;
//     }

.outer-box{
	position: absolute;
    outline:4px solid #ff3941;
    outline-offset: 6px;
	z-index:1;
}

.inp-waf-lingans{
        // padding:0px 25px 20px 25px;
        display: block;
        position: relative;
		.db-wrapper{
			// margin-right:12px;
			// position: absolute;
			// left:5px;bottom:5px;
			// right:5px;
			// top:5px;
			position: absolute;
			top: 5px;
			left: 5px;
			right: 5px;
			bottom: 5px;
			// font-size: 1.2em;
			// color: rgb(0,158,107);
			// border: 1px solid red;
		}
		.gitem{
			// border-radius: 12px;
			// overflow: hidden;
			// display: flex;
			// justify-content: center;
			// position: relative;
			// transform: translateZ(0);
		}
        .waf-ligan-item{
            // margin-right:12px;
            // height:calc(100% - 24px);
            // margin-bottom:22px;

			// height:100%;
            // cursor: pointer;
            // box-shadow: 0 1px 3px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 2%);
			// position: relative;
			
			position: absolute;
			top: 12px;
			left: 12px;
			right: 12px;
			bottom: 12px;
			font-size: 1.2em;
			color: rgb(0,158,107);
			>div{
				// border:1px solid red;
				height:100%;
			}
			.img-box{
				cursor: zoom-in;
				// min-height: 120px;
				// max-height: 100%;
				// line-height: 120px;
				// font-size: 0;
				display: flex;
				height:100%;
				border-radius:16px;
				// overflow: hidden;
				position: relative;
			}
            img{
                // width:293px;
                // border-radius:16px;
                // height:100%;
				width:100%;
				object-fit: cover;
				border-radius:16px;
            }

            .mod-op-bar{
                position: absolute;
                right:30px;
                top:8px;
                transition:.2s all linear;
                opacity:0;
                display: flex;
                >a{
                    margin-left:4px;
                }
                .new-like-icon:hover,.new-liked-icon:hover{
                    background-color:#EBEDF5;
                }
                .like{
                    width:43px;height:44px;
                    display: inline-block;
                    background:url('../assets/eleven/like_btnbg.png') no-repeat;
                }
                .op-more{
                    width:43px;height:44px;
                    display: inline-block;
                    background:url('../assets/eleven/mood_op_more.png') no-repeat;
                    position: relative;
                    >dl{
                        position: absolute;
                        top:40px;width:90px;
                        right:0px;
                        z-index:2;
                        border-radius:5px;
                        display: none;
                        padding-top:20px;
                        dd{
                            background:#fff;
                            border-radius:5px;
                            a{
                                line-height:44px;
                                width:90px;
                                border-radius:5px;
                                display: inline-block;
                                text-align: center;
                                color:#000;
                            }
                            a:hover{
                                background:#FAFAFA;
                            }
                        }
                        dd:first-child,dd:first-child a{
                            border-bottom-left-radius:0px;
                            border-bottom-right-radius:0px;
                        }
                        dd:first-child{
                            border-bottom:1px solid #eee;
                        }
                        dd:last-child,dd:last-child a{
                            border-top-left-radius:0px;
                            border-top-right-radius:0px;
                        }
                    }
                    >dl:after{
                        content: '';
                        width: 14px;
                        height: 7px;
                        background: url() center center no-repeat;
                        -ms-background-size: cover;
                        background-size: cover;
                        position: absolute;
                        top:13px;
                        right: 15px;
                        left: inherit;
                    }
                }
                .new-like-icon{
                    background-image:url('../assets/eleven/pic_zan.png');
                    background-repeat: no-repeat;
                    background-color:#fff;
                    border-radius:8px;
                    background-position:50% 5px;
                    font-size:14px;
                    padding-top:20px;
                    text-align: center;
                    width: 43px;
                    height: 44px;
                    color:#000;
                    display: inline-block;
                    border:1px solid #E9EBF4;
                }
                .new-liked-icon{
                    background-image:url('../assets/eleven/pic_zaned.png');
                    background-repeat: no-repeat;
                    background-color:#fff;
                    border-radius:8px;
                    background-position:50% 5px;
                    font-size:14px;
                    padding-top:20px;
                    text-align: center;
                    color:#000;
                    width: 43px;
                    height: 44px;
                    display: inline-block;
                }
                .op-more:hover{
                    >dl{
                        display: inline-block;
                    }
                }
            }
            .mod-op-bar-active{
                opacity:1;
            }

            
            .is-gif-icon{
                background:url('../assets/eleven/gif_icon.png') no-repeat;
                background-position:bottom;
                width:32px;height:24px;
                position: absolute;
                bottom:34px;
                left:10px;
            }

			&:hover{
				.img-box img{
					// transform: scale(1.08);
				}
				.pic-basic-info,.meo-opts,.con-mask{
					opacity: 1;
				}
			}
        }
        .waf-ligan-item:hover{
            .mod-op-bar{
                opacity:1;
            }
            .is-gif-icon{
                display: none;
            }
			// .preview-img-item{
			// 	transform: scale(1.08);
			// }
        }
    }
    .waf-lingans:after{
        content:'';
        clear: both;
        display: inline-block;
    }
 .item-move {
        transition: all .5s cubic-bezier(.55,0,.1,1);
        -webkit-transition: all .5s cubic-bezier(.55,0,.1,1);
      }




.cus-loading-new{
	// background:url('../assets/load_new.gif') no-repeat;
	width: 30px;
    height: 30px;
	display: inline-block;
	img{
		width:100%;
		height:100%;
	}
}

.no-more-data{
	// text-align: center;
	// color:#9e9e9e;
	// font-size:14px;
	// margin-bottom:20px;
	margin: 65px 0;
    font-size: 14px;
    line-height: 21px;
    color: #9e9e9e;
    text-align: center;
}

.nine-home-search{
	// width:1022px;
	background:inherit;
	padding:0px;
	.left{
		background:#fff;
		width:100%;
		display: flex;
		border-radius:32px;
		align-items:center;
		height:64px;
		padding:4px;
	}
	.color-filter{
		margin-right:20px;
		// min-width:72px;
		// border-left:1px solid #D8DBEB;
		height:100%;
		cursor: pointer;
		display:flex;
		align-items: center;
		position: relative;
		&:after{
			// content:'';
			// display: inline-block;
			// // width:16px;height:9px;
			// width:60px;
			// height:27px;
			// // background:url('../assets/color_tip_bg.png') no-repeat;
			// // background:url('../assets/eleven/color_circle.png') no-repeat;
			// // background-size:16px 9px;
			// background-size:cover;
			// position:absolute;
			// top:-20px;
			// // margin-left:10px;
			// left:0px;
		}
        .common-icon-clear-inp{
            position: absolute;
            right:-5px;
        }
	}
    .no-after{
        &:after{
            display: none;
        }
    }
	.cur-color-val{
		width:24px;height:24px;
		display:inline-block;
		margin-left:20px;
    border-radius:24px;
		background-image:url('../assets/color_new_circle.png');
		background-repeat: no-repeat;
		background-position: center;
		&:after{
			content:'';
			display: inline-block;
			// width:16px;height:9px;
			width:60px;
			height:27px;
			background:url('../assets/color_tip_bg.svg') no-repeat;
			// background:url('../assets/eleven/color_circle.png') no-repeat;
			// background-size:16px 9px;
			background-size:cover;
			position:absolute;
			top:-14px;
			// margin-left:10px;
			left:0px;
		}
	}
    .cur-color-default-val{
		background:url('../assets/eleven/color_default_sel.png') no-repeat;
		background-size:cover;
    }
	.el-color-picker{
		border:1px solid red;
		width:72px;
		position: absolute;
		right:0px;
		opacity:0;
		.el-color-picker__trigger{
			border:1px solid red;
            width:100%;
		}
	}
}
.be-simliar-opts{
	right:inherit;
	left:10px;
	top:10px;
}

.search-by-pic-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 64px;
    padding-left: 12px;
}

.search-by-pic{
	line-height:64px;
	width:151px;
	min-width:151px;
	text-align: center;
	border-radius:32px;
	background-image:url('../assets/icon_pic_to_pic_btn.svg');
	background-repeat: no-repeat;
	background-color:#fff;
	background-position:30px center;
	border:none;
	height:64px;
	font-size:14px;
	transition:.2s all linear;
	padding-left:30px;
	cursor: pointer;
	margin-left:12px;
	&:active{
		background-color:#d8dbeb;
	}
}
  .cap-top{
	height:498px;
	background:url('../assets/202204/nav_game_cut.jpg') no-repeat;
	background-size:cover;
	padding-top:165px;
	box-sizing: border-box;
	position: relative;
  // margin-bottom:20px;
}
  .gm-home-stic{
    // position: sticky;
    // top:84px;
    // z-index:11;
    // background:#111;
  }
  .gp-filter {
    display:inline-block !important;
    width:100%;
    margin:0px;
    padding:30px 0px;
    padding-top:0px;
    top:196px;
    .gp-img-layout{
        display: flex;
        align-items: center;
        .q-f-item-wrap{
          display: flex;
          align-items: center;
          // padding-left:10px;
          grid-gap:5px;
        }
        .zw-fn-el{
          max-width: calc(100% - 730px);
        }
    }
    .mobile{
        display: none;
    }
  }
  .top-games {
    display: flex;
    flex-wrap: wrap;
    grid-gap:20px;
    // margin-bottom:30px;
    li {
      // min-width:275px !important;
      // width: 255px !important;
      width:calc((100% - 100px) / 6);
      height: 178px !important;
      border-radius: 16px;
      overflow: hidden;
      // margin-right: 20px;
      position: relative;
      border: 2px solid transparent;
      transition:.2s all linear;
      &.no-data{
        background:#1D1D1F;
      }
      .hid-el {
        // display: none;
        opacity: 0;
      }
      &:hover{
        border-color: #11CCB1;
        cursor: pointer;
        a>img{
          transform:scale(1.08);
        }
        .hid-el {
          // display: none;
          opacity:1;
        }
      }
      a>img{
        height:100%;object-fit: cover;
        width:100%;
      }
      &:last-child {
        // margin-right: 0px;
      }
      &:nth-child(1) {
        // min-width: 530px !important;
        width:calc((100% - 40px) / 3);
        height: 369px !important;
        // margin-right: 20px;
        // margin-bottom: 20px;
        a>img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      &:nth-child(2) {
        width:calc((100% - 40px) / 3);
        // margin-bottom: 20px;
        height: 369px !important;
        // margin-right: 20px;
        a>img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      &:nth-child(3) {
        // margin-bottom: 20px;
        // min-width: 530px !important;
        // margin-right: 0px;
        width:calc((100% - 40px) / 3);
        height: 369px !important;
        a>img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .con-mask {
        height: 129px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }

      .is-adv {
        position: absolute;
        right: 10px;
        bottom: 10px;
        font-size: 12px;
        color: #848393;
        background: #1d1d1f;
        width: 34px;
        border-radius: 4px;
        text-align: center;
        line-height: 18px;
      }
      .left-icos {
        position: absolute;
        left: 10px;
        top: 10px;
        display: flex;
        align-items: center;
        img {
          &:first-child {
            margin-right: 10px;
          }
        }
      }
      .right-icos {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        align-items: center;
        img {
          &:first-child {
            // margin-right:10px;
          }
        }
      }
      .basic-data {
        position: absolute;
        bottom: 11px;
        left: 13px;
        right: 12px;
        z-index: 1;
        .tit {
          font-size: 20px;
          font-weight: 500;
          line-height: 33px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .otit {
          line-height: 22px;
          font-size: 14px;
          font-weight: 500;
          color:#ffffff99;
        }
        .desc {
          font-size: 14px;
          margin-top: 4px;
          font-size: 14px;
          font-weight: 500;
          color:#ffffff99;
        }
      }
    }
  }

  .gm-cate-page-prev {
    background: url('../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    transform: rotate(180deg);
    z-index: 1;
    left: 15px !important;
    top: 40px;
    border-radius: 8px;
    &:after {
      display: none;
    }
    &:hover {
      background: url('../assets/pro/more_right_arrow.svg') no-repeat;
      background-size: cover;
    }
  }
  .gm-cate-page-next {
    background: url('../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    z-index: 1;
    border-radius: 8px;
    right: 15px;
    &:after {
      display: none;
    }
    &:hover {
      background: url('../assets/pro/more_right_arrow.svg') no-repeat;
      background-size: cover;
      // opacity:.6 !important;
    }
  }
  .bal-tit {
    font-size: 26px;
    color: #fff;
    margin-bottom: 10px;
    // height: 37px;
    // line-height: 37px;
    a {
      background: url('../assets/pro/more_arrow.svg') no-repeat;
      display: inline-block;
      height: 100%;
      background-position: right 15px;
      padding-right: 20px;
    }
    .no-bg {
      background: none;
      cursor: default;
    }
    .random-change {
      font-size: 12px;
      color: #848393;
    }
  }

  .zj-ba-data {
    margin-top: 60px;
    position:sticky;
    top:84px;
    z-index:11;
    background:#111;
    .data-wrap {
      display: flex;
      .bdl-data-item {
        width: 216px;
        height: 216px;
        border-radius: 16px;
        overflow: hidden;
        margin-right: 20px;
        margin-bottom: 20px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .yx-cates {
      display: flex;
      padding-right: 180px;
      .yx-c-item {
        min-width: 216px;
        height: 98px;
        background: #1d1d1f;
        width: auto !important;
        margin-right: 20px;
        border-radius: 16px;
        position: relative;
        opacity:.6;
        border:2px solid transparent;
        transition:.1s all linear;
        &.no-data{
          background:#1D1D1F;
        }
        &:hover{
          opacity:1;
          border-color:#11CCB1;
        }
        >a{
          display: inline-block;
          width:100%;
          height:100%;
        }
        .txt {
          color: #fff;
          font-size: 16px;
          position: absolute;
          bottom: 13px;
          left: 16px;
        }
        &.active{
          opacity:1;
          border:2px solid #11CCB1;
        }
      }
    }

    &.scale{
      .yx-cates{
        .yx-c-item{
          width:120px;
          min-width:120px;
          height:44px;
          border:1px solid transparent;
          border-radius:8px;
          a{
            display: flex;
            justify-content: center;
            align-items: center;
            .txt{
              position: relative;
              left:inherit;
              bottom:inherit;
            }
          }
          &:hover{
            border:1px solid #11CCB1;
          }
          &.active{
            border:2px solid #11CCB1;
          }
        }
      }

      .gmcate-page-next-msize{
        top:22px;
        width:40px;height:40px;
        right:0px;
      }
      .gmcate-page-prev-msize{
        top:22px;
        width:40px;height:40px;
      }
    }
  }
}

</style>